CSS Box Shadow Generator

box-shadow nedir?

box-shadow, bir elemanın kutu çerçevesinin arkasına ya da içine bir gölge çizen CSS özelliğidir. Gölge, elemanın kendi border-radius değerini birebir takip eder; yani yuvarlatılmış bir kartın gölgesi de yuvarlatılmış olur. Gölge, belgenin akışında yer kaplamaz, bu yüzden bir elemana gölge eklemek komşularını hiçbir şekilde itmez veya kaydırmaz.

Arayüzlerde gölgenin işi süsleme değil, derinlik bildirmektir. Bir açılır menünün, bir modalın ya da sürüklenen bir kartın diğer içeriğin üstünde durduğunu kullanıcıya anlatan şey çoğu zaman gölgedir. Gölge ne kadar yumuşak ve yaygınsa eleman o kadar yüksekte, ne kadar dar ve keskinse o kadar yüzeye yakın algılanır.

Dört uzunluk değeri ne yapar?

Bir gölge katmanı en fazla dört uzunluk alır ve sıraları değişmez:

• offset-x: gölgeyi yatayda kaydırır. Pozitif değer sağa, negatif değer sola iter.
• offset-y: gölgeyi dikeyde kaydırır. Pozitif değer aşağı, negatif yukarı iter.
• blur: gölgenin kenarının kaç px boyunca yumuşayacağını söyler. Negatif olamaz, 0 verilirse gölge tamamen keskin bir kopya gibi görünür.
• spread: gölgenin çizilmeden önce ne kadar büyütüleceğini ya da küçültüleceğini söyler. Tek negatif olabilen ikinci değerdir.

Üçüncü ve dördüncü değer isteğe bağlıdır. Yalnızca iki uzunluk yazarsanız tarayıcı bunları offset-x ve offset-y olarak okur, blur ve spread sıfır sayılır. Renk yazılmazsa metnin rengi, yani currentColor kullanılır; bu genellikle istenen sonucu vermez, o yüzden rengi açıkça belirtmek iyi bir alışkanlıktır.

Yayılma ile bulanıklığın farkı

İkisi de gölgeyi büyütüyormuş gibi görünür ama işleri farklıdır. blur gölgenin boyutunu değiştirmez, yalnızca kenarını bir geçiş bandına çevirir: gölge merkezde tam opak kalır, kenara doğru saydamlaşır. spread ise gölgenin geometrisini büyütür ya da küçültür; 10px yayılma, gölge şeklini her yönde 10px genişletir.

Bu ayrım pratikte iki yerde işe yarar. Negatif yayılma, gölgenin elemanın altından taşan yanlarını geri çeker ve gölgenin yalnızca aşağıda toplanmasını sağlar; modern kart gölgelerinin sırrı çoğunlukla budur. Sıfır bulanıklık ile pozitif yayılma ise bir kenarlık taklidi üretir ve düzen ölçülerini bozmadan çerçeve eklemenizi sağlar.

inset: gölgeyi içeri almak

Değerin başına inset anahtar kelimesi eklendiğinde gölge dışarıya değil, elemanın içine çizilir. Bu, girintili bir alan hissi vermek için kullanılır: basılı görünen bir düğme, içi oyuk bir arama kutusu ya da uzun bir listenin üst kenarındaki hafif karartma. inset gölgeler arka planın üstünde ama içeriğin altında kalır, yani kutunun içindeki metni karartmaz.

Neden birden fazla gölge katmanı kullanılır?

Tek bir gölge, gerçek bir ışığın altındaki nesneyi taklit etmekte yetersiz kalır. Gerçek hayatta nesnenin hemen altında koyu ve dar bir temas gölgesi, biraz uzağında ise geniş ve açık bir ortam gölgesi bulunur. CSS’te bunu, aynı özelliğe virgülle ayrılmış birden çok katman yazarak taklit edersiniz:

• dar ve koyu bir katman nesneyi zemine oturtur,
• orta bir katman geçişi yumuşatır,
• geniş ve çok saydam bir katman yüksekliği hissettirir.

Katmanların sırası önemlidir: listede önce yazılan gölge, sonra yazılanın üstüne çizilir. Yani en dar ve en koyu katmanı başa koymak, onun daha geniş katmanlar tarafından yutulmasını engeller. Material Design’ın yükseklik ölçeği de tam olarak böyle, üç katmanlı olarak tanımlanmıştır.

Renk seçiminde alışılmış bir hata, gölgeyi saf siyahın saydamı olarak yazmaktır. Arka plan renkliyse siyah gölge sahneyi griye çeker ve kirli görünür. Bunun yerine arka plan renginin koyu ve doygun bir tonunu kullanın. Renk uyumlarını denemek için CSS gradyan oluşturucu aracını yanında açık tutmak işinizi kolaylaştırır.

box-shadow, drop-shadow ve text-shadow

Aradaki en somut fark şudur: saydam arka planlı bir simgeye box-shadow verirseniz simgenin kendisinin değil, onu çevreleyen kutunun gölgesini görürsünüz. drop-shadow ise alfa kanalını okur ve şeklin gerçek konturunu gölgeler. Buna karşılık drop-shadow katmanlamaya box-shadow kadar elverişli değildir ve genelde daha pahalıdır.

Performans tarafında bilinmesi gerekenler

Gölge, tarayıcının boyama aşamasında hesaplanır. Bulanıklık yarıçapı büyüdükçe boyanacak alan ve hesaplama maliyeti hızla artar; 100px’lik bir bulanıklığı düzinelerce karta uygulamak, özellikle orta seviye telefonlarda kaydırmayı gözle görülür biçimde ağırlaştırır.

Asıl tuzak box-shadow’u animasyonlamaktır. Her karede gölge yeniden boyanır ve bu iş GPU’ya devredilemez. Yaygın çözüm şudur: elemana bir ::after sözde elemanı ekleyin, hedef gölgeyi ona verin, başlangıçta opacity: 0 bırakın ve hover durumunda yalnızca opaklığı değiştirin. Opaklık bileşik katmanda çalışır, yani yeniden boyama olmadan animasyonlanır.

Erişilebilirlik notu

Gölge dekoratif bir sinyaldir ve tek başına anlam taşımamalıdır. Bir düğmenin odaklandığını yalnızca yumuşak bir gölgeyle anlatmak, yüksek kontrast modunda ya da zayıf görme durumunda kaybolur. Odak halkasını gölgeyle kuruyorsanız kontrastı yeterli, kalınlığı en az 2px olan bir renk seçin ve outline özelliğini tamamen kaldırmayın. Windows yüksek kontrast modunda gölgelerin çizilmediğini de unutmayın.

Sık yapılan hatalar

• Sıralamayı karıştırmak: blur üçüncü, spread dördüncü değerdir. Yer değiştirdiklerinde tarayıcı satırı sessizce geçersiz sayar.
• Negatif bulanıklık yazmak. Geçersizdir ve tüm bildirimi düşürür.
• overflow: hidden verilmiş bir kapsayıcının içindeki elemanın gölgesinin kesilmesine şaşırmak.
• Gölgeyi kenarlık yerine kullanıp ardından düzen hesabında aynı kalınlığı beklemek; gölge yer kaplamaz.
• Aynı seçiciye iki ayrı box-shadow satırı yazmak. İkincisi birincisini eziyor, katmanlar toplanmıyor; katmanlar tek satırda virgülle ayrılır.