Texte avec fond dégradé en CSS

Posté par : 212

Vous avez marre de faire appel a un designer pour avoir un texte avec fonds dégradé? C’est desormais possible de le faire simplement en CSS.
L’astuce est simple à intégrer à votre code, Le texte en PNG commence avec votre couleur d’arrière-plan (dans ce cas, nous utilisons le dégradé blanc).

Tout d’abord le code HTML mis en place. Chaque titre (de préférence les tags d’entête) utilise un élément imbriqué supplémentaire vide span.

<h2>Mon titre cool<span></span></h2>

Utilisez le CSS pour définir le style du h2. Vous n’aurez pas besoin d’utiliser le style de l’exemple. Utilisez le vôtre. La seule chose importante est de veiller à ce que vous ayiez défini la propriété position à relative.

h2
{
/* style optionnel, vous pouvez utiliser tout ce que vous voulez */
font-size:220%;
color:#0079b6;
font-weight:normal;
letter-spacing:-.05em;
margin:.6em 0;
/* ceci est important */
position:relative;
}

Maintenant, le dégradé.

Nous mettons un PNG transparent comme image de fond pour l’élément span et définissons la propriété position à absolute pour qu’il puisse se placer au-dessus du texte.

h2 span
{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url(gradient_1.png) repeat-x;
}

Malheureusement, nous ne vivons pas dans un monde parfait et tous les navigateurs ne prennent pas en charge la transparence PNG. Donc, pour ces navigateurs, prenez-en compte.

* html h2 span
{
background-color:#fff;
background-color:transparent;
background-image: url(none.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src= »gradient_1.png », sizingMethod= »scale »);
}

Ainsi, le span vide est au-dessus du titre et il est allongé sur toute la largeur et la hauteur. Puisque le dégradé est inclus dans la couleur de fond du titre il ne sera pas visible dans l’écart entre les lettres rendant l’effet réel.

Voir le code en action : exemple.

3 commentaires pour “Texte avec fond dégradé en CSS”

Sebbane Ismail
Posté le : 16 février, 2009

salamoualikoum
merci pour cet astuce; seulement faut bien donner le lien pour télécharger l image gradient_1.png.
j ai testé cet exemple, cela marche trés bien avec un font de page blanc.
avec un font sombre cela donne pas un résultat agréable.
A+