Avec le CSS3, on a pu faire plein de nouvelles choses directement en CSS et non plus en Photoshop, comme par exemple les ombres portées. Grâce à box-shadow, il est donc possible de rajouter une ombre portée sur un élément, et généralement ce genre de petits détails permet d’améliorer un design un peu fade.
Mais si vous utilisez box shadow sur un png à fond transparent, comme un logo par exemple, vous allez être un peu déçu car l’ombre ne va pas suivre le contour de votre image, mais les contours de la boite
L’une des solutions est d’appliquer le filtre drop-shadow
Cette propriété est plutôt bien prise en compte par les navigateurs actuels, à éviter si vous cibler les vieux navigateurs
1 réflexion sur “Comment ajouter une ombre portée en css sur une image png transparent”
Intéressant, je ne connaissais pas cette astuce ! J’utilise habituellement des générateurs comme makingcss, mais ils ne gèrent en général que du box shadow classiques j’en ai jamais vu qui étaient basés sur les filtres. Ce seraient intéressant qu’ils intègrent ce type de fonctionnalité