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

Sıradaki ders: Anahat

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler