Sublimez vos titres et entêtes avec CSS

Voici deux techniques pour rendre vos titres et entêtes (h1, h2, etc) plus beau et originaux. La première concernera un effet de dégradé sur le texte, quand à la deuxième, elle nous permettra de styliser nos balises de titres grâce à l’emploi de la balise <span>.

Dégradé sur un texte

Je tire cette technique de l’excellent Web Designer Wall. Le principe est d’ajouter une image png comprenant un dégradé du blanc au transparent sur notre titre. Nous utiliserons ici la balise span afin de paramètrer l’effet sur le texte lui-même, et non sur le background comme on pourrais facilement le faire en utilisant la propriété CSS background-image.

Sympa, n’est-ce pas?

Rien de bien compliqué: Il suffit d’ajouter la balise span dans votre header:

<h1><span></span>Hello, I'm Shinely</h1>

Le code CSS n’est guère plus compliqué, le plus important étant de bien paramètrer h1 en position relative et h1 span en position absolue.

h1 {
    font: bold 330%/100% "Lucida Grande";
    position: relative;
    color: #464646;
}

h1 span {
    background: url(gradient.png) repeat-x;
    position: absolute;
    display: block;
    width: 100%;
    height: 31px;
}

Malheureusement, il y à plusieurs inconvénients à cette technique:
Premièrement, sémantiquement parlant, le <span></span> n’a pas de sens.
L’image dégradée ne devra pas être plus grande que votre texte, autrement celui-ci ne sera plus sélectionnable.
Il est nécessaire d’utiliser un hack si l’on souhaite assurer une compatibilité avec IE6.
La couleur de fond de votre titre devra être solide: Tout blanc, tout gris, tout noir mais ni image ni dégradé.

Entêtes stylisés

J’ai pris connaissance de cette technique il y à quelques temps déja via le blog Devil can’t burn. Niveau principe, on reste dans le même esprit que ce dont je vous ai parlé plus haut: Utiliser la balise span afin de s’ouvrir de nouvelles possibilités en terme de style de titre.
Voilà pour l’exemple:

Le code xhtml:

<h2><span>Des entetes stylisés en css</span></h2>

Niveau CSS, nous allons définir une image de fond se répetant en x sur l’élément h2, Puis, nous allons utiliser background-color sur h2 span de manière à cacher l’image de fond à l’endroit ou se situe le texte.

h2 {
    font: 1.4em "Arial Narrow", Helvetica, Arial, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
    color: #9cf;
    background: transparent url(background.gif) repeat-x 0 50%;
}

h2 span {
    padding: 0 4px;
    background: #FFF;
}

Voilà pour aujourd’hui. Bonnes décorations