Drop-shadow
drop-shadow() ile Alpine gölgeyi öğrenirsin.
drop-shadow() gerçek şekle uyar
drop-shadow() işlevi, filter çatısı altında çalışan bir gölge fonksiyonudur. Yazımı drop-shadow(4px 4px 8px rgba(0,0,0,0.5)) biçimindedir: yatay kayma, dikey kayma, bulanıklık yarıçapı ve renk.
box-shadow öğenin kutusuna gölge çizerken drop-shadow() gerçek şekle uyar. Bu yüzden saydam arka planlı bir logoya veya simgeye gölge vermek için doğru araç budur.
Simge ve SVG çizimlere gölge
Saydam arka planlı bir SVG simgesi düşün: bir yıldız, bir kalp, bir konuşma baloncuğu. box-shadow bu simgenin çevresindeki dikdörtgene gölge çizer; köşelerde kare bir hale oluşur.
drop-shadow() ise simgenin gerçek kenarlarını izler. Yıldızın uçları, kalbin kavisleri boyunca ince bir gölge çizer. Bu yüzden simge setleri ve çizimler için neredeyse her zaman bu işlev tercih edilir.
Birden çok drop-shadow çağrısı
drop-shadow() işlevini aynı filter bildiriminde birden çok kez kullanabilirsin. Her çağrı bir gölge katmanı ekler; değerler arasına boşluk bırakılır.
Örneğin filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) hem yakındaki ince hem uzaktaki yumuşak bir gölge çizer. Bu yöntem, ikonların sayfada daha doğal durmasını sağlar.
Uygulama Logoya tek bir drop-shadow ver
.logo seçicisi için bir filter bildirimi yaz. İçinde tek bir drop-shadow(2px 2px 4px rgba(0,0,0,0.4)) çağrısı olsun.
Örnek çözümü göster
/* logo gölgesi */
.logo {
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
}Kendini test et
-
Saydam arka planlı logoya gölge verirken hangisi daha uygun?
.logo { filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4)); }- box-shadow: 2px 2px 4px rgba(0,0,0,0.4)
- filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4))
- text-shadow: 2px 2px 4px rgba(0,0,0,0.4)
- outline: 2px solid rgba(0,0,0,0.4)
Cevabı göster
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4)) — Doğru. drop-shadow() saydam alanları atlar ve gerçek şekle gölge çizer.
-
Logoya şekle uyan gölge ver
.logo { filter: ____; }Cevabı göster
.logo { filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.4)); } -
Parametreyi sırasına eşle
- İlk değer
- Yatay kayma
- İkinci değer
- Dikey kayma
- Üçüncü değer
- Bulanıklık yarıçapı
- Dördüncü değer
- Renk