box-shadow gölgelerini görsel olarak oluşturun: offset-x, offset-y, blur, spread, renk ve opaklık değerlerini kaydırıcılarla ayarlayın, çoklu gölge katmanı ekleyin ve üretilen CSS'i tek tıkla kopyalayın.
Gölge değerleri, öğenin kendisini değil çevresindeki çizimi etkiler.
Gölge katmanları
Hazır gölgeler
Üretilen CSS
box-shadow: 0px 10px 20px 0px rgba(208, 52, 95, 0.35);
CSS box-shadow nasıl çalışır?
box-shadow, bir elemanın etrafına gölge ekleyen CSS özelliğidir. Söz dizimi sırasıyla yatay ve dikey kayma, bulanıklık, yayılma, renk ve isteğe bağlı inset anahtar sözcüğünden oluşur:
Söz dizimi: box-shadow: offset-x offset-y blur spread color;
inset: Anahtar sözcük eklendiğinde gölge dışa değil elemanın içine doğru çizilir.
Çoklu gölge: Birden çok gölgeyi virgülle ayırarak aynı elemana uygulayabilirsiniz.
blur gölgenin yumuşaklığını belirler (0 = keskin); spread ise gölgeyi her yöne büyütüp küçültür. Renge opaklık ekleyerek (rgba) daha yumuşak, gerçekçi gölgeler elde edebilirsiniz.
Sık sorulan sorular
Aklınızdaki sorulara birlikte bakalım
DETAYLARbox-shadow nedir?
İHTİYAÇ / ÇÖZÜM / YAKLAŞIMbox-shadow, bir HTML elemanının etrafına gölge ekleyen CSS özelliğidir. Yatay/dikey kayma, bulanıklık, yayılma ve renk değerleriyle elemanları yüzeyden ayırarak derinlik ve hiyerarşi hissi oluşturur.
DETAYLARbox-shadow parametreleri nelerdir?
İHTİYAÇ / ÇÖZÜM / YAKLAŞIMSırasıyla offset-x (yatay kayma), offset-y (dikey kayma), blur (bulanıklık yarıçapı), spread (yayılma) ve color (renk + opaklık). İsteğe bağlı inset anahtar sözcüğü gölgeyi içe çevirir. Söz dizimi: box-shadow: offset-x offset-y blur spread color;
DETAYLARinset nedir?
İHTİYAÇ / ÇÖZÜM / YAKLAŞIMinset anahtar sözcüğü, gölgeyi elemanın dışına değil içine doğru çizer. Böylece buton basılı, giriş alanı gömük veya çukur yüzey gibi görünümler elde edilir. Bu araçta 'inset (iç gölge)' kutusunu işaretleyerek uygulayabilirsiniz.
DETAYLARÇoklu gölge nasıl eklenir?
İHTİYAÇ / ÇÖZÜM / YAKLAŞIMbox-shadow özelliğine birden çok gölgeyi virgülle ayırarak verirsiniz: box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 12px 28px rgba(0,0,0,.2);. Bu araçta '+ Ekle' ile yeni katman oluşturup her birini ayrı ayarlayabilir, gerçekçi katmanlı gölgeler üretebilirsiniz.
DETAYLARblur ile spread arasındaki fark nedir?
İHTİYAÇ / ÇÖZÜM / YAKLAŞIMblur gölgenin yumuşaklığını/bulanıklığını belirler; 0 keskin bir kenar, yüksek değerler dağınık yumuşak bir gölge verir. spread ise gölgenin boyutunu büyütüp küçültür: pozitif değer her yöne genişletir, negatif değer daraltır. blur kenarı yumuşatır, spread alanı değiştirir.
DETAYLARbox-shadow performansı etkiler mi?
İHTİYAÇ / ÇÖZÜM / YAKLAŞIMÇok büyük blur değerleri ve çok sayıda katmanlı gölge, özellikle animasyonlarda yeniden boyama (repaint) maliyeti yaratabilir. Statik arayüzlerde etkisi genelde önemsizdir; animasyonlu durumlarda gölgeyi opacity ile değiştiren bir pseudo-eleman kullanmak daha akıcı sonuç verir.
Ücretsiz · Bağlayıcı değil
Hesap tamam. Konuşalım mı?
Numaranızı bırakın, biz sizi arayalım. İhtiyacınızı 5 dakikada dinleyip yol haritasını birlikte çıkaralım — satış konuşması değil, teknik sohbet.
