Kutu gölgesi
box-shadow ile öğelere gölge eklersin.
box-shadow nedir?
box-shadow bir kutunun arkasına gölge çizer. Dört temel değer alır: yatay kayma (offset-x), dikey kayma (offset-y), bulanıklık yarıçapı (blur radius) ve renk.
Örneğin box-shadow: 2px 4px 8px rgba(0,0,0,0.2) ifadesinde gölge sağa 2 piksel, aşağı 4 piksel kayar ve 8 piksel bulanıklıkla yumuşatılır. Renk olarak yarı saydam siyah kullanılır; böylece gölge doğal görünür.
İçe gölge ve çoklu gölge
Gölgeyi kutunun içine çizmek için başa inset anahtarını eklersin: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2). Bu, içeri çökük bir görünüm verir; örneğin metin alanlarında yaygındır.
Birden çok gölgeyi virgülle ayırarak yan yana kullanabilirsin. Örneğin bir kartta hem hafif bir dış gölge hem de alt kenara vurgu için ikinci bir gölge eklemek derinlik hissini artırır.
Uygulama Karta gölge ekle
.card seçicisi için bir bildirim bloğu yaz. İçine box-shadow: 0 4px 12px rgba(0,0,0,0.1) bildirimini ekle. Bu, kartın altına yumuşak bir gölge yerleştirir.
Örnek çözümü göster
/* kart gölgesi */
.card {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}Kendini test et
-
box-shadow: 2px 4px 8px rgba(0,0,0,0.2) ifadesinde 8px neyi belirtir?
- Gölgenin yatay kayması
- Gölgenin dikey kayması
- Gölgenin bulanıklık yarıçapı
- Gölgenin rengi
Cevabı göster
Gölgenin bulanıklık yarıçapı — Doğru. Üçüncü değer bulanıklık yarıçapıdır; gölgeyi yumuşatır.
-
Gölge özelliğini yaz
.card { ____: 2px 4px 8px rgba(0,0,0,0.15); }Cevabı göster
.card { box-shadow: 2px 4px 8px rgba(0,0,0,0.15); } -
box-shadow değerlerini eşleştir
- 2px
- Yatay kayma
- 4px
- Dikey kayma
- 8px
- Bulanıklık
- rgba(0,0,0,0.2)
- Renk