css3 ombre portée sur du texte

Si vous aussi vous voulez faire un effet d’ombre portée sur du texte en css3 voici un exemple, malheureusement ce n’est valable que sous firefox 3.1 et au delà.

le html de notre tuto: avec le texte à ombrer,

<h2>Mon exemple</h2>

voici le css qui va permettre l’effet d’ombre sur le texte grâce a css3

#h2:hover
{
cursor:pointer;
font-size:24px;
text-shadow: 2px 2px 20px #999;
width:400px;
}

voila ce que ça donne quand je passe ma souris sur le titre:

ombre de texte en css3

je vous laisse vous amusez avec les paramètres pour découvrir sur quoi ils influent.

ce petit effet d’ombre en css est plutôt sympa. cela évite de créer des images sous photoshop etc etc.

on peut aussi creer un effet d’ombre portée sur une div ou un input:

<div id="madiv">ceci est ma div avec son ombre portée en css 3</div>

le css de ma div qui va permettre l’ombrage

#madiv

{
-moz-box-shadow: 1px 1px 10px #FF0;
background-color:#FFF;

}

comme on peut le voir a gauche le rebord de ma div sans ombre et le background gris, et à droite  avec l’effet le rebord ombrée et le background blanc.

Je rappelle que ces propriétés sont valide uniquement sous mozilla firefox!