CSS Gölge Oluşturucu
Gerçek zamanlı önizleme ile CSS box-shadow oluşturun.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.15);CSS'te box-shadow nedir?
CSS box-shadow özelliği, herhangi bir HTML elemanına gölge eklemenizi sağlar. Derinlik, yükselti ve görsel hiyerarşi oluşturmak için web tasarımında en çok kullanılan araçlardan biridir. Doğru uygulanmış gölgeler, elemanların sayfanın üzerinde "süzülüyor" gibi görünmesini sağlar.
Söz dizimi şunları içerir: yatay kayma (X), dikey kayma (Y), bulanıklık yarıçapı (blur), genişletme yarıçapı (spread), renk ve isteğe bağlı olarak iç gölgeler için "inset". Birden fazla gölgeyi virgüllerle ayırarak birleştirebilirsiniz.
Sıkça sorulan sorular
inset özelliği nedir?
inset, dış gölgeyi iç gölgeye dönüştürür. Derinlik efektleri, batık metin alanları veya basılmış buton görünümleri oluşturmak için kullanışlıdır.
Gölgeler performansı etkiler mi?
Basit gölgelerin etkisi minimaldir. Ancak birçok elemanda çok yüksek bulanıklık değerine sahip gölgeler yavaş cihazlarda performansı etkileyebilir. Ölçülü kullanın.
Birden fazla gölge kullanabilir miyim?
Evet, virgüllerle ayırın: box-shadow: 2px 2px 5px rgba(0,0,0,0.1), 0 0 20px rgba(0,0,0,0.05). Bu daha gerçekçi ve sofistike efektler oluşturur.
Daha fazla bilgi ister misiniz? Tam rehberimizi okuyun →