Astuce CSS : Pas à pas pour la création d'un titre design en HTML/CSS
Voici un pas à pas, avec les explications qui vont avec, pour créer un titre un peu plus design qu'un simple texte, sans images et uniquement en utilisant les styles CSS. Il s'agit de la méthode utiliser pour créer les grands titres de ce site. Avec ce pas à pas, vous pourrez tester au fur et à mesure, et ainsi voir et comprendre les évolutions.
Voici le résultat à atteindre :
Démarrons par écrire le code HTML, assez simple finalement, tout se fait avec les styles :
Commençons par écrire les deux classes dont nous aurons besoin :
.preTitre {} .preTitre .titre {}
ainsi que les bases du titre (police, taille, couleur, ..)
.preTitre {} .preTitre .titre {font-family:Arial; font-size:20px; color:#CC3333;}
ajoutons notre barre rouge, de la même couleur que le titre
.preTitre {border-bottom:solid 1px #CC3333;} .preTitre .titre {font-family:Arial; font-size:20px; color:#CC3333;}
maintenant, plaçons la barrre au bon endroit, l'astuce est de forcer la hauteur, tout en autorisant le contenu à dépasser de la boite
.preTitre {border-bottom:solid 1px #CC3333; height:12px; overflow:display;} .preTitre .titre {font-family:Arial; font-size:20px; color:#CC3333;}
en jouant sur la hauteur du conteneur, vous pouvez placer la barre ou vous souhaitez, au milieu du texte, ou sur la ligne de base.
Maintenant, nous devons faire en sorte que le trait ne s'affiche plus au niveau du texte, pour cela nous allons indiquer au titre qu'il s'agit d'un contenu en ligne, mais tout de même contenu dans une boite, sur laquelle nous appliquons un fond blanc (ou de la couleur de votre fond)
.preTitre {border-bottom:solid 1px #CC3333; height:12px; overflow:display;} .preTitre .titre {font-family:Arial; font-size:20px; color:#CC3333; display:inline-block; background:#FFFFFF;}
finalement, vous pouvez placer votre titre ou vous souhaitez au niveau de la barre
.preTitre {border-bottom:solid 1px #CC3333; height:12px; overflow:display; text-align:center;} .preTitre .titre {font-family:Arial; font-size:20px; color:#CC3333; display:inline-block; background:#FFFFFF;}
et ajouter un peu de marge autour du texte pour que cela soit plus joli, attention, contrairement aux apparences, il ne faut pas ajouter du "margin" qui serait transparent mais du "padding" qui va étendre le fond blanc
.preTitre {border-bottom:solid 1px #CC3333; height:12px; overflow:display; text-align:center;} .preTitre .titre {font-family:Arial; font-size:20px; color:#CC3333; display:inline-block; background:#FFFFFF; padding:0 8px;}
si vous souhaitez mettre le texte à gauche ou à droite, il sera alors préférable de n'ajouter du padding que du côté où la barre est affichée.
Vous devriez désormais être capable de customiser vos titres.
