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 :
-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);
Le code suivant nous donnera :
Le mieux pour un maximum de compatibilité c’est de mettre systématiquement tous les préfixes navigateurs . Bien qu’aujourd’hui les navigateurs ne supportant pas encore la fonctionnalité standard deviennent de plus en plus rare (je ne sais pas ce qu’il en est sur Mac, j’ai jamais testé…). Le mieux c’est d’utiliser des outils qui génèrent automatiquement les préfixes (J’utilise makingcss, mais il y en a pas mal d’autres sur le web qui font plus ou moins la même chose.. 🙂
Bonsoir,
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