CSS Kutu Gölgesi
Responsive iş size layout’un ne zaman değişeceğini öğretti. Kutu gölgesi Effects & Motion’ı açar: kartın altında yumuşak derinlik, alanın içinde basık bir his veya düğmede sessiz bir kaldırma — hepsi tek özellik box-shadow ile, box model boyutunu değiştirmeden.
Gölgenin parçaları
📊 Bir bakışta box-shadow parçaları
| Parça | Günlük işi |
|---|---|
offset-x / offset-y |
Gölgenin kutuya göre yeri (pozitif = sağ / aşağı) |
blur-radius |
Kenar yumuşaklığı — 0 sert; büyük değer kenarı tüylendirir |
spread-radius |
İsteğe bağlı; blur’dan önce gölge siluetini büyütür/küçültür |
color |
Genelde rgba(...) — gölge yarı saydam kalsın |
inset |
İsteğe bağlı anahtar sözcük — gölgeyi kutunun içine çizer |
| Birden fazla liste | Virgülle ayrılan gölgeler üst üste biner (uzak yumuşak + yakın net) |
Süs yağmuru değil, yükselme düşünün. Kartın altında tek yumuşak katman çoğu zaman üç gürültülü konturdan iyidir.
Sakin dış yükselme
Yaygın kart tarifi: küçük aşağı offset, orta blur, az veya hiç spread, yarı saydam siyah (veya gri). Gölge yukarıdan gelen ışığı ima etmeli — kutunun arkasına yapışmış siyah dikdörtgen gibi görünmemeli.
.card {
background: #fff;
border-radius: 0.75rem;
padding: 1.25rem;
box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
}
Pozitif offset-y gölgeyi kutunun altına bırakır. Alpha’yı düşük tutun ki metin ve komşular okunaklı kalsın.
inset — kutunun içinde derinlik
inset anahtar sözcüğü gölgeyi içeri çizer. Çukurlar, basılmış düğmeler veya hafif gömülü hissedilmesi gereken alanlar için yararlıdır.
.field {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
box-shadow: inset 0 0.125rem 0.35rem rgba(15, 23, 42, 0.08);
}
inset, border veya padding yerine geçmez — yalnızca boyalı alanın içinde ışığın nasıl düştüğü hissini değiştirir.
Katmanlı gölgeler
Birden fazla gölgeyi virgülle listeleyin. Uzak yumuşak bir katman artı daha yakın, daha sıkı bir katman çoğu zaman ağır kontur olmadan doğal yükselme gibi okunur.
.panel {
background: #fff;
border-radius: 1rem;
box-shadow:
0 0.125rem 0.25rem rgba(15, 23, 42, 0.06),
0 0.75rem 1.5rem rgba(15, 23, 42, 0.1);
}
Listedeki sıra boyama sırasıdır; ikisi de aynı öğeye aittir. Tek opak leke yerine iki sessiz katmanı tercih edin.
Sıfırlama, vurgu ve kutuya odak
Durum yeniden düz oturmalıysa box-shadow: none verin. Renkli bir gölge marka vurgusunu destekleyebilir — blur yine yumuşak, alpha mütevazı kalsın. Unutmayın: glifler için text-shadow (Metin Efektleri); kutular için box-shadow.
.chip {
box-shadow: none;
}
.chip.is-accent {
box-shadow: 0 0.35rem 0.9rem rgba(37, 99, 235, 0.28);
}
Kendiniz deneyin
- Beyaz bir karta tek yumuşak dış gölge verin (
0x-offset, küçük y, blur ~1rem, düşük alpha). - Arama alanına
insetgölge ekleyin; hafif gömülü hissetsin. - Bir paneli iki katmanlı yığına yükseltin (yakın + uzak).
- Alıştırma dosyasındaki katı siyah
box-shadow’u bulun vergbaile yumuşatın. - Başlık ışıltısının
text-shadowkullandığını,box-shadowolmadığını doğrulayın.
Sık yapılan hatalar
- Her kartın arkasında ikinci kutu gibi duran tamamen opak siyah gölgeler
- Blur ile spread’i aynı düğme sanmak
text-shadowgerekirken metnebox-shadowkoymak- Her liste öğesine, bağlantıya ve ikona gölge; sayfa sislenene kadar
- Tasarımın basık veya oyuk bir görünüm istediği yerde
inset’i unutmak
Özet
box-shadow: offset, blur, isteğe bağlı spread, renk ve isteğe bağlıinset- Yumuşak yarı saydam dış gölgeler sakin yükselme satar
- Virgülle katman yığın; düzleştirmek için
none - Kutu ≠ glif —
text-shadow’u metne saklayın - Effects & Motion’da sıradaki: Transitions
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek