CSS Gölge (box-shadow) Üretici

Nasıl çalışır?

Sol panele gölge renginizi yazın: tek satıra bir renk gelir ve HEX, RGB ile HSL yazımlarının üçü de tanınır. Çoğu arayüz gölgesi saf siyahtan üretilir; koyuluğu renkle değil kaydırıcıyla ayarlarsınız — yüzde 25 koyuluk, kodda rgba(0, 0, 0, 0.25) olarak yazılır. Yatay ve dikey kayma gölgenin düştüğü yönü belirler: dikey kaymayı 8 pikselde bırakıp yatayı sıfırlamak, ışığın tepeden geldiği en doğal görünümü verir. Bulanıklık kenarın ne kadar yumuşayacağını, yayılma gölgenin kutudan kaç piksel taşacağını söyler; eksi yayılma gölgeyi kutunun altına toplar ve zarif bir "kalkık kart" etkisi kurar. Yön seçeneğiyle dış gölgeyi iç gölgeye (inset) çevirebilirsiniz — iç gölge kutuyu çökmüş, basılı bir yüzey gibi gösterir. Sağ paneldeki kod her değişiklikte yenilenir; kopyalayıp kendi CSS dosyanıza yapıştırın ya da İndir düğmesiyle önizlemenin 1200×800 piksellik PNG halini alın.

Bu araç css box shadow generator, box shadow css, inset shadow css aramalarıyla da biliniyor.

box-shadow nedir?

box-shadow, bir HTML kutusunun dışına ya da içine gölge çizen CSS özelliğidir. En az bir kayma çifti ve renk ister; bulanıklık ve yayılma isteğe bağlıdır, inset anahtar kelimesi gölgeyi kutunun içine alır. Gölge kutunun boyutunu değiştirmez ve tıklama almaz — yalnızca çizimdir; bu yüzden yerleşimi bozmadan derinlik katmanın en ucuz yoludur. Virgülle ayırarak aynı kutuya birden çok gölge katmanı yazılabilir.

rgba() nedir?

rgba(), bir rengi kırmızı, yeşil ve mavi kanalların 0-255 arası değerleriyle tanımlayan ve dördüncü parametre olarak 0 ile 1 arasında bir opaklık taşıyan CSS renk yazımıdır. rgba(0, 0, 0, 0.25) çeyrek koyulukta siyah demektir: altındaki zemin yüzde 75 oranında görünmeye devam eder. Gölge renklerinde neredeyse her zaman bu yazım kullanılır, çünkü doğal gölge saydamdır ve zeminin rengiyle karışarak her arka planda uyumlu durur.

box-shadow ile drop-shadow arasındaki fark nedir?

box-shadow gölgeyi öğenin dikdörtgen kutusuna göre çizer: kutunun köşeleri yuvarlaksa gölge onu izler ama içerik saydam bir PNG ya da kesilmiş bir şekilse gölge yine dikdörtgen düşer. filter: drop-shadow() ise görünür piksellere bakar: saydam zeminli bir logonun gölgesi logonun kendi hatlarını takip eder. Karşılığında drop-shadow yayılma değeri almaz ve inset bilmez; iç gölge ya da yayılmalı katman gerekiyorsa tek seçenek box-shadow'dur. Kural pratik: dikdörtgen kart ve kutular için box-shadow, şekilli görseller için drop-shadow.

Sert gölge tuzağı: koyuluk ve bulanıklık dengesi

Yeni başlayanın en sık hatası, gölgeyi tam opak siyahla ve az bulanıklıkla basmaktır: kutunun altında yumuşak bir derinlik yerine kirli bir çerçeve belirir. Gerçek ışıkta gölgeler hem saydam hem dağınıktır; bu yüzden arayüz gölgelerinde koyuluk genellikle yüzde 10-30 aralığında, bulanıklık ise kaymanın en az iki-üç katında gezer. 0 8 24 piksellik bir gölge yüzde 25 koyulukla doğal durur, yüzde 100 koyulukla yapışkan bir leke gibi görünür.

İkinci tuzak performanstır: box-shadow her karede yeniden çizilir. Kayan bir sayfada onlarca kutuya büyük bulanıklıklı gölge verirseniz eski cihazlarda kaydırma takılabilir. Aynı görünümü daha az kutuya uygulamak ya da bulanıklığı kısmak çoğu zaman gözle görülür fark yaratmadan yükü düşürür.

Hangi durumda hangi gölge?

Gölge süs değil, yükseklik dilidir: kullanıcı hangi öğenin üstte durduğunu gölgeden okur.

• Kart ve kutular → küçük kayma, orta bulanıklık (0 2 8 gibi): zeminden hafif kalkık durur
• Açılır menü ve diyalog → büyük kayma ve bulanıklık (0 12 32 gibi): sayfanın üstünde yüzer
• Basılı düğme, giriş alanı → iç gölge (inset): yüzeye gömülü hissi verir
• Odak vurgusu → kayması ve bulanıklığı 0, yayılması 2-3 piksel gölge: çerçeve gibi sarar

Sık sorulanlar

box-shadow değerlerinin sırası ne anlama geliyor?

Sıra sabittir: yatay kayma, dikey kayma, bulanıklık, yayılma ve renk. Başa inset yazılırsa gölge kutunun içine düşer. Bu araç kodu her zaman bu tam sırayla, beş değeri de açık yazarak üretir; hangi kaydırıcının hangi değeri değiştirdiğini koddan izleyebilirsiniz.

Birden çok gölgeyi aynı kutuya verebilir miyim?

CSS buna izin verir: gölgeler virgülle art arda yazılır ve ilk yazılan en üstte çizilir. Bu araç okunması kolay kalsın diye tek katman üretir; iki katman gerekiyorsa aracı iki ayarla iki kez çalıştırıp değerleri virgülle birleştirmeniz yeterlidir.

İndir düğmesi ne kaydediyor?

Önizlemedeki kartın 1200×800 piksellik PNG halini — tasarım sunumuna ya da onaya gölgenin görünümünü koymak için kullanışlıdır. Kodun kendisi için Çıktıyı kopyala düğmesini kullanın.

Gölge rengi olarak neden rgba yazılıyor?

Çünkü gölgenin doğal görünmesini sağlayan şey saydamlıktır: rgba'nın son sayısı 0 ile 1 arasında opaklıktır ve koyuluk kaydırıcısı doğrudan onu ayarlar. Düz HEX yazılsaydı gölge tam opak basılır, altındaki zemin hiç görünmezdi.