Bir manilla klasörüne bir şey koyduğunuzda - örneğin normal bir kağıt yaprağı - bu şeyin bir kısmı klasörden biraz dışarı çıkabilir. Cüzdan ve kredi kartlarıyla aynı şey. Kartlar, hangi kartları taşıdığınıza hızlı bir şekilde göz atabilmeniz için hafifçe dışarı çıkar.
Bu tür şeylere “yarık” diyorum. Bir yarık, içinden dışarı bakan görsel bir öğeyi takabileceğimiz bir açıklık yanılsaması yarattığımız yerdir. Ve bunu CSS'de yapabiliriz!
Tasarımın can alıcı kısmı, orada bir yarık olduğuna dair görsel ipucu veren gölgedir. Ardından, sergilenen öğenin alttan bakması için alan sağlayan yarık için bir kapak var.
İşte birlikte yapacağımız şey:
Gölgeyi oluşturmaya başlayalım
Örnekteki gölgenin, aşağıdaki gibi gerçek bir CSS gölgesi ile oluşturulmadığına şaşırabilirsiniz. box-shadow ya da drop-shadow() filtre. Bunun yerine, gölge kendi içinde ayrı bir unsurdur, karanlık ve bulanıktır. Bu, tasarımın hem varsayılan hem de hareketli durumlarında daha uyumlu hale getirilmesi için önemlidir.
Kapak tasarımdaki diğer unsurdur. Örtü, gölgeyle örtüşen öğe dediğim şeydir. İşte gölge ve örtünün nasıl bir araya geldiğini gösteren bir şekil.
Gölge, gradyan arka planı olan küçük dik bir dikdörtgenden yapılmıştır. Degrade ortada daha koyu. Böylece öğe bulanık olduğunda, ortada daha koyu olan bir gölge oluşturur; dolayısıyla daha boyutludur.
Şimdi, yeniden oluşturulan gölgenin sol yarısı, üstte, kabının arka planıyla tamamen aynı renkte bir dikdörtgen ile kaplanmıştır.
Hem kapak hem de gölge daha sonra çok hafif sola hareket ettirilir, böylece katmanlı gibi görünür
Kapak üzerinde çalışmak
Kapağın tasarımın arka planıyla uyum sağlaması için arka plan rengi, içerdiği öğeden devralınır. Alternatif olarak, aşağıdaki gibi standartları kullanarak kapağı arka planıyla karıştırmayı da deneyebilirsiniz. CSS maskeleri ve karışım modları, tasarım seçimlerinize ve gereksinimlerinize bağlı olarak.
Bu standartların nasıl uygulanabileceğine dair bazı temel bilgileri öğrenmek için şu makalelere başvurabilirsiniz: Sarah Drasner's "Maskeleme ve Kırpma: Her Biri Ne Zaman Kullanılmalı" maskeler üzerinde mükemmel bir astar sağlar. Ayrıca CSS karışım modları hakkında da yazdım Bu makalede konuyla ilgili bilgi alabileceğiniz yer.
Örneğimin kaynak kodunda, içindeki öğeleri hizaladığımı ve istiflediğimi fark edeceksiniz.
CSS Izgarası ayrıca yapmama izin verdiği şey, bunların üçünü de ayarlamak divs böylece hepsi tam genişlikte
main > div {
grid-area: 1 / 1;
}Bu, her şeyin üst üste yığılmasını sağlar. Normalde, bir ızgaradaki öğeleri diğer öğelerle kaplamaktan kaçınmak için çok çalışırız. Ama bu örnek buna dayanıyor. ben verdim .slit-cover Altındaki görüntüyü doğal olarak ortaya çıkaran %50 genişliğinde. Oradan bir ayarladım transform onu %50 negatif yönde hareket ettiren, artı gölgeyi daha önce kaydırdığım küçük miktar (25px) bunun da ortaya çıktığından emin olmak için.
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}Ve işte bizde! Bir klasörden, cüzdandan veya herhangi bir şeyden dışarı bakan bir şeyi taklit eden oldukça doğal görünümlü bir yarık.
Bunu yapmanın daha fazla yolu var! Birincisi, Flexbox öğelerin arka arkaya sıralanmasını ve bu şekilde ortada hizalanmasını sağlayabilir. İşleri yan yana almanın birçok yolu var. Ve belki de kullanmanın bir yolu vardır. box-shadow mülkiyet, drop-shadow() filtre, hatta SVG filtreleri yanılsamayı gerçekten satan aynı türde gölge efekti elde etmek için.
Ve kendi görünümünüzü ve hislerinizi elde etmek için buna tamamen riff verebilirsiniz. Örneğin, gölgenin ve görüntünün konumunu değiştirmeyi deneyin. Veya renk kombinasyonları ile oynayın ve blur() filtre değer. Kapağın ve gölgenin şekli de değiştirilebilir - Bahse girerim düz bir gölge yerine kavisli bir gölge oluşturabilir ve yorumlarda bizimle paylaşabilirsiniz!
