CSS Box Shadow Oluşturucu
CSS Box Shadow Nedir?
CSS box-shadow özelliği, bir öğenin çerçevesi etrafına gölge efektleri ekler. Gölgeler kaydırılabilir, bulanıklaştırılabilir, yayılabilir, renklendirilebilir ve inset (iç gölge) olarak ayarlanabilir. Virgülle ayrılmış birden fazla gölge, zengin efektler için katmanlanabilir. Bu oluşturucu, karmaşık çok katmanlı gölgeleri görsel olarak oluşturmanıza ve yapıştırmaya hazır CSS'i panoya kopyalamanıza olanak tanır.
Box Shadow Oluşturucu Nasıl Kullanılır
-
Gölgeyi konumlandırmak ve şekillendirmek için Offset X/Y, Blur ve Spread kaydırıcılarını ayarlayın.
-
Gölge rengi seçmek için renk örneğine tıklayın ve saydamlık için Opacity kaydırıcısını kullanın.
-
İç parlaklık veya basılmış efekt oluşturmak için 'İç gölge'yi açın.
-
Birden fazla gölgeyi üst üste yığmak için '+ Katman ekle'ye tıklayın.
-
Oluşturulan CSS'i kopyalayın ve stil sayfanıza yapıştırın.
Sıkça Sorulan Sorular
box-shadow ile drop-shadow filtresi arasındaki fark nedir? box-shadow, öğenin dikdörtgen kenarlık kutusu etrafına gölgeler ekler ve iç gölgeleri destekler. CSS filter: drop-shadow() işlevi, öğenin görsel şekline (şeffaflık dahil) uygulanır ve şeffaf arka plana sahip PNG'ler gibi dikdörtgen olmayan çerçeveleri takip eder.
Material Design kart yükseltme efektini nasıl oluştururum? İki box shadow istifleyin: yumuşak ortam gölgesi (büyük bulanıklık, düşük opasite, hafif yayılma) ve anahtar gölgesi (daha küçük bulanıklık, daha yüksek opasite, yönlü offset). Örneğin: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
box-shadow sayfa düzenini etkiler mi? Hayır. box-shadow öğenin boyutunu veya belge akışındaki konumunu etkilemez. Outline'dan farklı olarak, düzen alanı kaplamaz ve diğer öğeleri hareket ettirmez.
box-shadow'u canlandırabilirim? Evet. box-shadow, CSS geçişleri ve animasyonları ile canlandırılabilir. Performans için, box-shadow'u yalnızca gerekli olduğunda geçiştirmeyi tercih edin — tarayıcılar, box-shadow değişikliklerini transform veya opacity kadar verimli şekilde GPU-hızlandıramazlar.
Keywords: CSS box shadow oluşturucu, box-shadow CSS, CSS gölge aracı, CSS drop shadow, iç gölge, çok katmanlı gölge, CSS shadow çevrimiçi