21 Juin Comment faire une ombre portée en CSS 3
Avec la prise en charge progressive du CSS 3 par nos navigateurs, il est temps d’exploiter les nouvelles possibilités !
Aujourd’hui nous allons ajouter une ombre portée sur des parties de notre page web.
Attention le CSS 3 n’est pas pris en charge par les vieux navigateurs tel IE6…
La structure de box-shadow et text-shadow se présente la même façon : x-offset, y-offset, blur (flou), et couleur en RGBA.
Pour plus d’explication veuillez consulter, comment gérer les couleurs RGBA en CSS, et comment convertir une couleur HTML en composante RGBA.
Pour l’instant, comme pour de nombreux attributs CSS 3, il faut spécifier 2 fois l’ombre portée, une fois pour Firefox et une fois pour les autres navigateurs :
[code lang=”css”]
-moz-box-shadow: 3px 3px 4px 0px #656565;
-webkit-box-shadow: 3px 3px 4px 0px #656565;
-o-box-shadow: 3px 3px 4px 0px #656565;
box-shadow: 3px 3px 4px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=135, Strength=4);
[/code]
Le code suivant nous donnera :
Eric Revil
Publié à 20:58h, 04 novembreBonsoir,
Merci beaucoup de ces codes, cela fonctionne très bien dans DW et avec Firefox. En revanche, pour safari, tout au moins sur Mac, il ne veut rien savoir.
Y a t il une autre solution ?
Merci par avance de votre réponse.
Cordialement