CSS Box Shadow Oluşturucu
Gölge istediğiniz görünüme gelene kadar kaydırıcıları oynatın, sonra box-shadow satırını kopyalayın. Önizleme tam sonucu gösterir.
CSS
box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.35);
Bu araç hakkında
box-shadow dört uzunluk alır: yatay konum, dikey konum, bulanıklık yarıçapı ve yayılma. Bulanıklık kenarı yumuşatır, yayılma gölgeyi bulanıklaştırmadan önce büyütür veya küçültür; negatif yayılma ile pozitif Y değeri çoğu tasarım sisteminin kullandığı ince yükselme etkisini verir.
inset anahtar kelimesi gölgeyi kutunun arkasına değil içine çizer; basılı düğmeler ve iç oyuklar böyle yapılır. Renk genellikle gri değil düşük saydamlıkta siyahtır, çünkü yarı saydam gölge arkasındaki zeminle ilişkisini korur.
Sık sorulan sorular
- Gölgem neden gri ve yassı görünüyor?
- Düz gri arka planı yok sayar. Bunun yerine %20-40 saydamlıkta siyah ve küçük bir negatif yayılma kullanın.
- Birden fazla gölgeyi üst üste koyabilir miyim?
- Evet. Stil dosyanızda değerleri virgülle ayırın — her katmanı burada üretip birleştirebilirsiniz.
- box-shadow yerleşimi etkiler mi?
- Hayır. Kenarlığın aksine sınır kutusunun dışına çizilir; eleman boyutunu veya konumunu değiştirmez.