Comment faire une ombre portée en CSS 3

21 Juin Comment faire une ombre portée en CSS 3

Publié à 11:51h dans Outils par

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 :

Print page
Frédéric Voignier

Frédéric Voignier opère en tant que WebDeveloper et WebDesigner Freelance, depuis plus de 14 ans au service d'une clientèle variée. Je suis fervent défenseur de la création de site Internet juste, et du retour sur investissement. Passionné du Web et de son expérimentation, je me tiens informé des évolutions technologiques, relatives au web et à la visibilité en ligne.

1 Commentaire
  • Eric Revil
    Publié à 20:58h, 04 novembre Répondre

    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

Laisser un commentaire