Dégradé de texte CSS

| Alen Grakalic | Alban Lelasseux (traducteur) |

Cet article vous propose une introduction sur les bienfaits de l'utilisation des titres (X)HTML (h1, h2, etc.) pour vos divers documents.

Cet article a été publié à l'origine en anglais à l'adresse suivante : Css Text Gradient

- Titre : Dégradé de texte CSS

- Auteurs : Alen Grakalic, Alban Lelasseux (traducteur)

- Parution : 4 décembre 2008

- Licence : Copyright ® 2008 CSS Globe. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Qu'est-ce que c'est ?

- Ca marche ? Réellement ?

- Comment ça marche ?

- Remerciements

Qu'est-ce que c'est ?

Le dégradé de texte est une simple astuce CSS qui vous permet d'améliorer l'apparence de votre site en plaçant des dégradés sur les polices des titres en n'utilisant rien d'autre que le CSS et une image PNG.

Ca marche ? Réellement ?

Bien sûr ! Essayez vous-même. Changez le titre ci-dessus en tapant vos propres mots dans le champ disponible sur la page suivante.

Comment ça marche ?

L'astuce est très simple. Le texte Grannt en PNG devrait commencer 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.

Le code ressemble à ceci :

<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.

Remerciements

Tous mes remerciements à 12monkeys et à Bovino pour leur relecture.