Dégradé de texte CSS

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.

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.

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.

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