CSS Box Shadow (Kutu Gölgesi) Oluşturucu

box-shadow söz dizimi

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];

• x-offset: pozitif = sağ, negatif = sol.
• y-offset: pozitif = aşağı, negatif = yukarı.
• blur: 0 = keskin kenar, değer büyüdükçe daha yumuşak. Görünür boyut, öğenin dışına doğru yaklaşık bulanıklık değerinin 1,5 katı kadar uzanır.
• spread: öğenin ötesine eklenen boyut. Pozitif değer gölgeyi büyütür; negatif değer küçültür (ince halelerde işe yarar).
• colour: her CSS rengini destekler. rgba(0, 0, 0, 0.15) en sık kullanılan temel değerdir.
• inset: gölgeyi öğenin içine çeviren anahtar sözcük.

Katmanlı gölgeler gerçekçi görünür

Bu oluşturucu bir seferde yalnızca tek bir gölge kuralı üretir; katmanlı bir gölge oluşturmak için her katmanı ayrı üretip kuralları virgülle birleştirin.

Tek başına 0 0 40px gölgesi bulanık görünür. İki gölge, öğeye yakın küçük ve keskin bir gölge ile daha uzaktaki büyük ve yumuşak bir gölge, gerçek ışığın nasıl saçıldığını taklit eder.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

İlk satır sıkı temas gölgesini, ikinci satır daha yumuşak çevre gölgesini verir. Bu tek desen, kart biçimindeki arayüzlerin %80’ini kapsar.

Yükseklik (elevation) sistemleri

Material Design, her biri farklı bir gölge kümesine sahip 6 yükseklik (elevation) seviyesi kullanır. Basitleştirilmiş hâliyle:

Her yükseklik rolü için bir tane seçin ve tutarlı biçimde kullanın.

Renkli gölgeler daha doğal görünür

Saf siyah gölgeler yapay durur, çünkü gerçek gölgeler altlarındaki yüzeyin rengini alır. Şunu deneyin:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

Saf siyah yerine serin bir mavi-gri. Sıcak arka planlarda daha sıcak bir ton kullanın.

Performans

box-shadow her yeniden boyamada (repaint) çizilir. Çok sayıda öğe üzerindeki büyük ve ağır gölgeler kaydırmayı yavaşlatabilir. Hafifletme yöntemleri:

• Bir bileşik katmanı zorlamak için öğeye transform: translateZ(0) uygulayın.
• Karmaşık gölgeleri filter: drop-shadow() ile yalnızca gölgenin bir clip-path’i izlemesi gerektiğinde değiştirin (genel olarak daha yavaştır).
• Sık sık yeniden işlenen (render) öğelerde gölgeleri sınırlayın.

Basılı durumlar için inset

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

inset gölgeler oyuk bir görünüm yaratır; düğme yüzeye bastırılmış gibi görünür. Aşağı yönlü küçük bir transform: translateY(1px) ile birleştirdiğinizde dokunsal bir tıklama hissi elde edersiniz.