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 rgba(0, 0, 0, 0.4); // ça c'est pour Firefox -webkit-box-shadow : 3px 3px 4px rgba(0, 0, 0, 0.4); // ça c'est pour Safari ou Chrome
Le code suivant nous donnera :
1 commentaire : “Comment faire une ombre portée en CSS 3”
Laisser un commentaire
Frédéric Voignier 
WebDesigner
WebDeveloper
WebMarketer
Mob. 06 24 86 45 58
graphiste Cognac : logo et communication visuelle pour Cognac !
agence communication internet charente : vous avez des envies de création de site, vous souhaitez communiquer sur votre entreprise ? SubDelirium est là pour vous !
publicité Angouleme votre site vitrine pour un budget étudié et compétitif.
Freelance Charente : webdesigner freelance en Charente et création de site internet freelance en Charente !
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