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 aspect-ratio tanımı

16 January 2023 tarihinde yayınlandı.

progress elementini stillendirelim

30 December 2022 tarihinde yayınlandı.