box-shadow nasıl çalışır
box-shadow, bir elementin kenarlık kutusunun çevresine bir gölge boyar. border-radius'u takip eder, düzende yer kaplamaz ve en az iki değere ihtiyaç duyar: yatayda ve dikeyde ne kadar kaydırılacağı.
Söz dizimi
box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] [<color>];
| Değer | Anlamı | Varsayılan |
|---|---|---|
inset | Gölgeyi içeri basılmış bir alan gibi kutunun içine çizer | Dışarıda |
| offset-x | Pozitif sağa, negatif sola kaydırır | Zorunlu |
| offset-y | Pozitif aşağı, negatif yukarı kaydırır | Zorunlu |
| blur | Kenarın ne kadar yumuşak olduğu; negatif olamaz | 0 (keskin kenar) |
| spread | Gölgeyi büyütür (pozitif) ya da küçültür (negatif) | 0 |
| color | Herhangi bir renk; yarı saydam siyah genellikle en iyi görünür | Metin rengi |
Uzunlukların sayısı anlamlarını belirler: iki tanesi uzaklıklardır, üçüncüsü bulanıklık, dördüncüsü spread ekler. Dene:
0 0 0 4px #f59e0b (bir halka), inset 0 0 12px #2563eb ve -8px -8px 0 #16a34a dene.
Spread: halkalar ve tek taraflı gölgeler
Spread, gölgenin boyutunu bulanıklaştırmadan önce değiştirir. Ondan iki kalıp çıkar:
- Bir halka: uzaklık yok, bulanıklık yok, yalnızca spread. Kenarlıktan farklı olarak elementin boyutunu değiştirmez, bu yüzden iyi bir odak göstergesidir (
:focus-visible { box-shadow: 0 0 0 3px #2563eb; }). - Boşluklu bir halka: renkli, daha büyük bir halkanın altına beyaz bir spread koy.
- Yalnızca tek taraf: gölgeyi aşağı kaydır ve negatif bir spread ile küçült, böylece yalnızca alttan görünür.
Gerçekçi derinlik için katmanlı gölgeler
Gerçek gölgelerin nesneye yakın koyu, keskin bir kısmı ve daha uzakta yumuşak, soluk bir kısmı vardır. İki ya da üç katman bunu tek büyük bir bulanıklıktan çok daha iyi taklit eder:
Listedeki ilk gölge en üste boyanır. Gölge renklerini yarı saydam siyah ya da arka planın koyu bir tonu olarak tut, asla düz gri yapma; böylece altta ne varsa onu koyulaştırırlar.
Inset gölgeler
inset, gölgeyi yüzey içeri basılmış gibi padding kutusunun içine çizer. Metin input'larına, çukur alanlara ve basılı butonlara uyar:
input {
box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}
button:active {
box-shadow: inset 0 3px 6px rgb(0 0 0 / 30%);
}
Inset bir gölge arka planın üstüne ama içeriğin altına çizilir. Kutu yerine harf şekillerini takip eden gölgeler text-shadow'dur.
Sık yapılan hatalar
- Saf siyah, tamamen opak gölgeler. Koyu bir çerçeve gibi görünürler. %10 ile %30 arası alfa kullan.
- Derinlik için tek bir devasa bulanıklık. Küçük keskin bir gölgeyi büyük yumuşak bir gölgeyle katmanla.
- Kenarda kesilen bir gölge.
overflow: hiddenolan bir ata onu kırpar; ataya padding ekle ya da overflow kuralını taşı. - Negatif bulanıklık. Geçersizdir ve bildirimin tamamı yok sayılır.
- Birçok elementte
box-shadowcanlandırmak. Her karede yeniden boyar. Ağır sayfalarda bunun yerine büyük gölgeyi taşıyan bir sözde elementinopacity'sini canlandır.
Sıkça Sorulan Sorular
box-shadow söz dizimi nedir?
box-shadow: offset-x offset-y blur spread color;, örneğin box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Yalnızca iki uzaklık zorunludur; gölgeyi kutunun içine çizmek için inset ekle.
box-shadow'da spread ne işe yarar?
Gölgeyi bulanıklaştırılmadan önce büyütür (pozitif) ya da küçültür (negatif). Uzaklığı ve bulanıklığı olmayan, spread değeri 3px olan bir gölge, elementin çevresinde düz 3px'lik bir halkadır.
Gölge yalnızca alta nasıl verilir?
Gölgeyi aşağı kaydır ve kenarlar kaybolsun diye negatif bir spread ile içeri çek: box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);.
box-shadow düzeni etkiler mi?
Hayır. Gölge yer kaplamaz ve diğer elementleri hareket ettirmez; bu yüzden düzeni kaydırmadan bir odak halkası ya da hover'da yükselme efekti eklemenin iyi bir yoludur. Bir atanın overflow: hidden değeri onu kırpabilir.
Birden fazla kutu gölgesi olabilir mi?
Evet, onları virgülle ayır. İlk gölge en üste çizilir. Küçük keskin bir gölgeyi büyük yumuşak bir gölgeyle katmanlamak, tek bir büyük gölgeden daha doğal görünür.
