box-shadow nedir?
box-shadow, bir HTML elemanının etrafına gölge ekleyen CSS özelliğidir. Yatay/dikey kayma, bulanıklık, yayılma ve renk değerleriyle elemanları yüzeyden ayırarak derinlik ve hiyerarşi hissi oluşturur.
box-shadow parametreleri nelerdir?
Sırasıyla offset-x (yatay kayma), offset-y (dikey kayma), blur (bulanıklık yarıçapı), spread (yayılma) ve color (renk + opaklık). İsteğe bağlı inset anahtar sözcüğü gölgeyi içe çevirir. Söz dizimi: box-shadow: offset-x offset-y blur spread color;
inset nedir?
inset anahtar sözcüğü, gölgeyi elemanın dışına değil içine doğru çizer. Böylece buton basılı, giriş alanı gömük veya çukur yüzey gibi görünümler elde edilir. Bu araçta 'inset (iç gölge)' kutusunu işaretleyerek uygulayabilirsiniz.
Çoklu gölge nasıl eklenir?
box-shadow özelliğine birden çok gölgeyi virgülle ayırarak verirsiniz: box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 12px 28px rgba(0,0,0,.2);. Bu araçta '+ Ekle' ile yeni katman oluşturup her birini ayrı ayarlayabilir, gerçekçi katmanlı gölgeler üretebilirsiniz.
blur ile spread arasındaki fark nedir?
blur gölgenin yumuşaklığını/bulanıklığını belirler; 0 keskin bir kenar, yüksek değerler dağınık yumuşak bir gölge verir. spread ise gölgenin boyutunu büyütüp küçültür: pozitif değer her yöne genişletir, negatif değer daraltır. blur kenarı yumuşatır, spread alanı değiştirir.
box-shadow performansı etkiler mi?
Çok büyük blur değerleri ve çok sayıda katmanlı gölge, özellikle animasyonlarda yeniden boyama (repaint) maliyeti yaratabilir. Statik arayüzlerde etkisi genelde önemsizdir; animasyonlu durumlarda gölgeyi opacity ile değiştiren bir pseudo-eleman kullanmak daha akıcı sonuç verir.