Design, Tutoriaux

Du style dans vos titres (effet glossy)

Outre le fait de bien choisir vos titres vous pouvez également les mettre en valeur via la feuille de style.

Nous allons ajouter un effet “glossy” au titre ainsi qu’un soulignement style “à la main”. Notez que ce type de customisation n’est aucunement nuisible pour le référencement contrairement à l’utilisation de polices spéciales (via la technologie sIFR par exemple)

Voilà le résultat souhaité :

Pour arriver à ce résultat, il suffit d’ajouter 2 zones recouvrant le titre auxquelles on mettra un fond transparent. Vous allez comprendre au fil des explications.

Attention aux PNGs

Les images utilisées en fond sont au format PNG afin de pouvoir gérer différentes niveaux de transparence. Pour éviter qu’il y ait des bugs sur certains navigateur (IE6 au hasard) nous allons utiliser pngFix ou pngHack. Les utilisateurs de WordPress pour utiliser le plugin : wp-pngFix

L’effet Glossy

Pour cela vous allez devoir récupérer (ou créer) une image transparente comme gradient-glossy.png (clique droit, enregistrer la cible du lien sous). Glissez là ensuite dans le dossier images de votre thème puis complétez la feuille de style.

[sourcecode language=’css’]
h2 span.glossy, {
background:transparent url(../img/gradient-glossy.png)
repeat-x scroll 0 -2px;
display:block;
height:18px;
position:absolute;
top:0;
+width:100%;
[/sourcecode]

Ajoutez ensuite une balise <span> dans vos titre, de la manière suivante :

[sourcecode language=’html’]


Titre

[/sourcecode]

Souligner vos titres

Il s’agit maintenant de mettre une image de fond au titre pour donner l’effet soulignement “à la main”. Récupérez par exemple l’image : post_title.jpg

Ajoutez maintenant ce fond à vos titres avec les attributs CSS suivants :

[sourcecode language=’css’]
h2  {
background:transparent url(../imgs/post_title.jpg) no-repeat scroll 0 100%;
color:#333333;
display:inline;
font-size:2em;
padding:0 0.3em 0.1em 0;
position:relative;
text-align:left;
}
[/sourcecode]

Bien évidemment il vous faudra adapter le CSS en fonction de votre theme.

source : Stefano Verna

ABONNEZ-VOUS à la mailing list, c'est GRATUIT !

Abonnez-vous à la mailing list et recevez plein d'infos intéressantes !

4 Comments

  1. Ping : De tout de rien, c'est la boîte à liens ! [30/9] | Weezonaute, le blogueur masqué
  2. @Valentin : Heureusement que tu es là pour faire la police… c’est un oubli. Cela dit, il n’en a pas fait un tuto, je me suis juste inspiré de la méthode qu’il utilise pour en faire un tuto…

    Parler de “la moindre des choses” me semble déplacé venant de qqn qui écrit un commentaire avec 4 fautes dans chaque phrase…

  3. C’est pour vous éviter des problèmes… par la suite 🙂

    S’il n’a pas fait de tuto, tu as donc pris le code dans son code source… En aucun cas c’est déplacé 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Avant de partir

Abonnez-vous à la mailing list et recevez plein d'infos intéressantes !