Le Journal du Blog
Le blog des blogueurs
Le blog des blogueurs
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.
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
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']
[/sourcecode]
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
De tout de rien, c'est la boîte à liens ! [30/9] | Weezonaute, le blogueur masqué (3 years ago)
[...] Du style dans vos titres (effet glossy) via Romain [...]
Keydrick (6 months ago)
I don’t know who you wrote this for but you helped a brtheor out.
Valentin (3 years ago)
Je doute que c’est vous qui à créer cette effet… la moindre des choses c’est de cité vos sources ou même les auteurs…
Ca peut être http://cssglobe.com/lab/textgradient/ ou encore… le plus connus : http://www.webdesignerwall.com.....ient-text/
Romain (3 years ago)
@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…
Valentin (3 years ago)
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é
Dexter Bult (10 months ago)
I’d come to concur with you one this subject. Which is not something I typically do! I really like reading a post that will make people think. Also, thanks for allowing me to comment!