blog sur le développement web, jquery,css3, Magento, Symphony, php et bien d'autres choses

Articles tagués ‘css shadow style’

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 portee css3 texte

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;

}

ombre portee en css sur un elementscomme 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!


Suivre

Recevez les nouvelles publications par mail.

Joignez-vous à 294 followers