Video örnek resim üzerine ikon koymak isteyince SVG’ye gölge uygulama ihtiyacım oldu. İhtiyaç tam olarak şöyle

gölgeli svg

Video örnek resim dosyası üzerine oynatma ikonu koyacağız ve bu oynatma ikonu beyaz olacak. Tabi beyaz okun altına beyaz zemin gelince ayrışması için gölge koyulmuş. Ben ikonu satır içi (inline) SVG olarak koydum. Sonra box-shadow uygulayayım dedim. Sonuç beklediğim gibi olmadı.

box-shadow svg’yi bir kutu gibi algılayıp kare şeklinde gölge verdi. Çözüm için aklıma CSS filter’ın drop-shadow özelliği geldi. Biraz araştırınca benzer cevaplar gördüm.

Aklınızın bir kenarında bulunsun.

Kalın sağlıcakla.

Kaynaklar

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı Devamını oku

field-sizing özelliği

05 August 2024 tarihinde yayınlandı.