Ombrage de boîtes et de textes

Avant la version 3 de CSS il fallait beaucoup d'astuces pour ombrer du texte et des boîtes.
Par exemple pour donner l'illusion d'un ombrage de texte il fallait dupliquer ce dernier avec un décalage de quelques pixels par rapport au texte original (emploi de la propriété position avec comme valeur : relative).
Pour donner l'illlusion d'un ombrage de boîte il fallait jouer sur les épaisseurs des bordures. Et encore le rendu n'était pas terrible ou encore produire une boîte grisée décalée de quelques pixels grâce au positionnement relatif.

Avec CSS3 et les nouvelles propriétés box-shadow et text-shadow tout cela est devenu un jeu d'enfant.

Texte ombré dans une boîte ombrée

Texte ombré dans une boîte ombrée

Le code de la page (extrait)

... <style> div{width : 100% ; height : auto ; border : 1px solid black ; border-radius : 10px ; margin : 20px auto 20px auto } div p{font-size : 30px ; text-align : center ; line-height : 50px ; color : navy ; text-transform : uppercase ; } .boite1{box-shadow : 5px 5px 5px blue; } .boite2 {box-shadow : -5px -5px 0px blue ;} .texte1 {text-shadow : 2px 2px 3px blue ;} .texte2 {text-shadow : -2px -2px 0px blue ;} ... <div class ='boite1'> <p class ='texte1'>Texte ombré dans une boîte ombrée</p></div> <div class ='boite2'> <p class ='texte2'>Texte ombré dans une boîte ombrée</p></div> ...

Commentaire du code CSS

Le texte balise par P à l'intérieur de DIV apparaît en majuscules ; 30px ; bleu marine.

On définit deux classes basées sur la propriété box-shadow et deux classes basées sur la propriété text-shadow.

Pour ces deux propriétés il y a quatre paramètres à passer : décalage horizontal, décalage vertical, floutage, couleur de l'ombre.
Pour les deux premiers paramètres la valeur peut être négative afin d'inverser la projection de l'ombre.
Pour le troisième paramètre 0px correspond à l'absence de floutage.


Retour menu