Et oui c’est possible avec CSS d’appliquer un effet dégradé sur des titres <h1>, <h2> ou <h3> En réalité la technique est simple.

Tout d’abord la syntaxe HTML pour mettre en place le système est :

  • <h2>Mon titre<span></span></h2>

Puis du coté CSS il va falloir placer un PNG semi-transparent par dessus puis générer l’effet de dégradé!

Votre balise de titre

  • h2 {
    font-size:220%;
    color:#0079b6;
    font-weight:normal;
    letter-spacing:-.05em;
    margin:.6em 0;
    position:relative;
    }

Notre petit degradé !

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

Et pour que ça soit compatible avec les navigateurs  :

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

Vous pouvez télécharger la Démo ici :

ou voir le site de l’éditeur sur : http://cssglobe.com/lab/textgradient/