Text-shadow avec CSS3 Zoom

Text-shadow avec CSS3

Donner un effet d'ombre portée aux titres de vos pages web, à certains passages du texte. Tout ça est devenu possible et enfantin avec la propriété TEXT-SHADOW de CSS3.

Plus de détails

Vous avez déjà choisi la plus belle police  pour le titre de votre page web. Vous avez, ensuite, lui attribué une couleur (celle qui va mettre en valeur ce grand titre). Et là, vous voulez encore le mettre en relief en appliquant un effet d'ombrage.
Pas de panique! Pensez simplement à BOX-SHADOW de css3 et vous verrez que le résultat est vraiment bluffant. Plus besoin d'ouvrir Photoshop pour créer cet effet.

Commençons, d'abord, par écrire le code html5 :

<div id="text_shadow">
              <h1>Mon super titre avec ombre portée</h1>
</div>


Le style css 3 :

#text_shadow h1 {
    font-size : 38px ;
    color : #ED1E79 ;

    text-shadow : 4px 1px 3px #000 ;
    filter : dropshadow(color=#000, offx=4, offy=1) ; /** spécial Internet Explorer **/
}

 

Et voilà le résultat !

Mon super titre avec ombre portée

 

Explication :
 - La première valeur 4px indique le décalage horizontal vers la droite.
 - La seconde valeur 1px correspond au décalage vertical vers le bas.
 - La troisième valeur 3px correspond à l'étendue du flou appliqué.
 - #000000 (noir en hexadécimal) indique la couleur de l'ombre.
 - Filter est le paramètre spécifique pour que IE comprenne le style CSS3

** Si vous n'arrivez pas à visualiser cet effet d'ombrage appliqué au texte, c'est que la version de votre navigateur est trop ancienne.

Nous reparlerons de CSS3 et COMPATIBLITÉ avec les NAVIGATEURS dans d'autres tutos.

Donner votre avis

Text-shadow avec CSS3

Text-shadow avec CSS3

Donner un effet d'ombre portée aux titres de vos pages web, à certains passages du texte. Tout ça est devenu possible et enfantin avec la propriété TEXT-SHADOW de CSS3.

Donner votre avis