Des entêtes stylisés
16 Avril 2008 par Devil Can't Burn
Dans ce tutoriel, nous allons voir comment rendre les
balises <H2> entêtes plus jolies grâce aux CSS. Pour
cela munissez vous d'un page avec une balise H2 et
commençons le tutoriel...
Préparer sa feuille de style
Un simple code html...<h2>Des entêtes qui ont du style !</h2>
Puis dans notre feuille de style...
h2 {
font: 1.4em "Arial Narrow", Helvetica, Arial,
Geneva, sans-serif;
font-weight: bold;
text-align: center;
color: #9cf;
/* Ajouter une image .gif se répétant en x
(horizontalement)
Changez le chemin de l'image par le votre ! */
background: transparent url(entetestylises/cool.gif)
repeat-x 0 50%;
} /* 50% ici centrera verticalement l'image. */
Amélioration du style...
Maintenant que nous avons notre entête avec un arrière plan, je vais ajouter un fond au texte à l'aide de balise span ce qui me donnera une coupure dans l'arrière plan.<h2><span>ENTETE</span& gt;</h2>
h2.cool {
letter-spacing: 0px;
font-size: 1.2em;
}
h2.cool span {
padding: 0 0 0 20px;
background: #FFF url(entetestylises/cool.gif) no-repeat left
center;
}
h2.cool span span {
padding: 0 20px 0 0;
background:#FFF url(entetestylises/cool.gif) no-repeat right
center;
}Voilà, vous savez maintenant comment rendre plus jolies les entête de vos pages...
Voir le résultat du tutoriel ?
Yoplait a écrit le Jeudi 24 Avril 2008 à 06H38
Youhou c'est de la tuerie ce truc !
jbj a écrit le Mercredi 16 Avril 2008 à 16H24
Très bien cet article, merci :)
Le design de ton blog est super, au passage!