Türkçe
Çok katmanlı CSS box-shadow tasarla, canlı önizleme ile üretime hazır CSS'i kopyala.
Son güncelleme
box-shadow:
0px 8px 24px 0px rgba(0, 0, 0, 0.18);box-shadow, herhangi bir öğeye gölge, parıltı veya iç çukur kazandıran CSS özelliğidir. Düz bir tasarıma *yükselti* hissi veren en güçlü kaldıraçtır - kartlar sayfadan kalkıyormuş gibi olur, modallar içeriğin üzerinde yüzer, butonlar basılabilir görünür.
İşin sırrı, *iyi* bir gölgenin nadiren tek katman olmasıdır. Gerçek gölgeler daha yumuşaktır ve ortam ışığını da taşırlar - Material, iOS, Tailwind gibi tasarım sistemleri farklı offset ve opaklıkta 2–3 box-shadow bildirimini üst üste yazar. Bunu elle kotarmak yorucudur; üretici her katmanı görsel olarak ayarlamana ve birleşik sonucu anlık görmene izin verir.
Coddy üreticisi sınırsız katmanı, *dış* ve *inset* gölgeleri, katman başına renk ve opaklığı ve en yaygın kalıpların hazır şablonlarını (sade kart, keskin drop, marka parıltısı, inset çukur, nömorfik yüzey) destekler. CSS'i kopyala ve stil dosyana yapıştır - yükleme, hesap veya filigran yok.
box-shadow: [inset] <x> <y> <blur> <spread> <color>. inset gölgeyi *içeride* çizer; olmazsa dışarı düşer.Hedeflediğin hisse yakın bir ön ayar seç - sade kart, yumuşak yükselti, keskin drop, marka parıltısı, inset çukur ya da nömorfik. Sonra üzerine ince ayar yap.
X/Y, blur, spread, renk ve opaklık sürgülerini oynat. Soldaki önizleme anında güncellenir. Düşük opaklık + yüksek blur, daha *yumuşak* gölge olarak okunur.
*Katman ekle* ile ikinci bir gölge ekle. Gerçek derinlik neredeyse her zaman iki katmanlıdır - kısa ve sıkı (temas gölgesi) bir tane, uzun ve yumuşak (ortam gölgesi) bir tane.
*Inset* açıkken gölge öğenin içine çizilir. Hafif bir dış gölgeyle birleştirince basılı buton hissi verir.
Önizleme tasarımına uyduğunda *CSS'i kopyala* tuşuna bas. Üretilen kural tüm aktif katmanları içerir - doğrudan stil dosyana yapıştırabilirsin.
box-shadow: x y blur spread color içindeki her değer ve görevi.
| Değer | Etki | Tipik aralık |
|---|---|---|
| X offset | Gölgeyi yatay kaydırır; pozitif = sağ | −40px – 40px |
| Y offset | Gölgeyi dikey kaydırır; pozitif = aşağı | Doğal ışık için 0px – 40px |
| Blur | Kenarı yumuşatır | 0px – 80px |
| Spread | Blur'dan önce şişirir ya da inceltir | −30px – 30px |
| Renk | Herhangi bir CSS renk; rgba() katman bazlı opaklık verir | Doğal gölge için rgba(0,0,0,0.05–0.3) |
inset | Gölgeyi öğenin içine çizer | - |
| Birden çok katman | Virgülle ayrılır; arkadan öne istiflenir | 2–3 katman gerçekçi derinlik verir |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);Kısa ve sıkı bir gölge temas noktasını, daha uzun ve yumuşak bir gölge ortam ışığı izlenimini verir. Modern tasarım sistemlerinin çoğu bu kalıbı kullanır.
box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);Parıltının eşit yayılması için X ve Y'yi sıfır yap. Küçük bir pozitif spread, blur yumuşatmadan önce glow'u biraz kalınlaştırır. Renkli glow'lar çok dikkat çeker, ölçülü kullan.
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06);Inset gölgeler öğenin içine çizilir. Yumuşak biri çukur izlenimini, 1 piksel inset ise iç çerçeveyi verir; ikisi birlikte basılı bir buton hissi yaratır.
box-shadow içindeki her değer ne anlama gelir?box-shadow: x y blur spread color. İlk ikisi offset; *blur* kenarı yumuşatır; *spread* blur öncesi boyutu değiştirir; renk herhangi bir CSS renk olabilir (opaklık için rgba()). Başa inset eklenirse gölge öğenin içine çizilir.box-shadow ile filter: drop-shadow() arasındaki fark nedir?box-shadow öğenin dikdörtgenini izler ve çizimi hızlıdır. drop-shadow() alfa kanalını izler (SVG ve şeffaf PNG için harikadır) ama maliyeti daha yüksektir. Kart ve butonlar için box-shadow, düzensiz şekiller için drop-shadow() kullan.transform: scale() var mı kontrol et.box-shadow düzeni etkiler mi?overflow: visible kullan.