Nasıl kullanılır?
- Bir hazır ayarla başlayın veya ilk katmanın kaydırma, bulanıklık, yayılma, renk ve opaklık değerlerini ayarlayın.
- Daha doğal bir derinlik için katman ekleyin veya iç gölge oluşturmak için “İç gölge” seçeneğini işaretleyin.
- Önizleme arka planını ve kutu rengini tasarımınıza göre ayarlayın, ardından CSS'yi kopyalayın.
Nasıl çalışır?
box-shadow her katman için sırasıyla yatay kaydırma, dikey kaydırma, bulanıklık yarıçapı, yayılma yarıçapı ve renk alır; başına isteğe bağlı olarak inset eklenebilir. Pozitif kaydırma değerleri gölgeyi sağa ve aşağı taşır. Bulanıklık kenarı yumuşatır ve negatif olamaz; yayılma ise bulanıklaştırmadan önce gölgeyi büyütür (pozitif değer) veya küçültür (negatif değer). Birden fazla katman virgülle ayrılır ve ilk katman en üstte çizilir.
Gerçekçi bir yükselti efekti genellikle düşük opaklıkta küçük ve belirgin bir gölgeyle daha büyük ve yumuşak bir gölgeyi birleştirir. “Yükseltilmiş” hazır ayarı da bunu yapar. Opaklığın açıkça belirtilmesi için renkler rgba() biçiminde yazılır. Gölgeler öğenin border-radius değerini izler ve yerleşimde yer kaplamaz; bu nedenle diğer öğeleri hiçbir zaman hareket ettirmez.
Çok sayıda öğede çok büyük bulanıklık değerleri kullanmak, düşük performanslı telefonlarda kaydırmayı yavaşlatabilir. Bir gölgeyi canlandırıyorsanız box-shadow değerini doğrudan canlandırmak yerine gölgeye sahip bir sözde öğeyi soldurmak genellikle daha akıcı sonuç verir.
Örnekler
Açık renkli sayfada kart
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); karta belirgin bir kenar ve yumuşak bir yükselti efekti verir.
Yerleşimi kaydırmayan odak halkası
0 kaydırma, 0 bulanıklık ve 3px yayılma değerlerine sahip bir katman, markanızın renginde bir düğmenin çevresine düz bir halka çizer. Kenarlığın aksine öğenin boyutunu değiştirmez.
Basılmış giriş alanı
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25), metin alanına hafifçe içe gömülmüş bir görünüm verir.
Sık sorulan sorular
box-shadow ile filter: drop-shadow() arasındaki fark nedir?
box-shadow öğenin kutusunu ve border-radius değerini izler; yayılma ve inset özelliklerini destekler. drop-shadow(), PNG veya SVG görsellerin saydam alanları da dâhil olmak üzere görünür şekli izler; ancak yayılma ve inset özellikleri yoktur.
Gölge neden kırpılıyor?
overflow: hidden değerine sahip bir üst öğe, gölgeler dâhil kutusunun dışına taşan her şeyi kırpar. Üst öğeye dolgu ekleyin veya overflow kuralını başka bir yere taşıyın.
Kaç katman kullanmalıyım?
Çoğu arayüz için bir veya iki katman yeterlidir. Daha fazla katman daha yumuşak bir görünüm sağlayabilir; ancak çizim maliyetini biraz artırır. Bu, uzun listelerde önem kazanır.
Gizlilik
CSS tarayıcınızda oluşturulur. Hiçbir şey yüklenmez veya saklanmaz.