Admin/Dev

14
Mai
2017

Astuce CSS : Pas à pas pour la création d'un titre design en HTML/CSS

Publié par sky

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 :

Article skymac : Astuce CSS - Pas à pas pour la création d'un titre design en HTML/CSS

Démarrons par écrire le code HTML, assez simple finalement, tout se fait avec les styles :

Mon Super Titre

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.

 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Les cookies assurent le bon fonctionnement de nos services. En continuant, vous acceptez leur utilisation sur notre site internet.
Accepter