Astuce CSS : Pas à pas pour la création d'un titre design en HTML/CSS - Version 2
En 2017 (déjà!), j'avais fais un petit guide pour réaliser un titre design pour agrémenter vos pages web. Aujourd'hui, le but est le même, mais pour un affichage légèrement différent. Il ne s'agit ni plus ni moins de refaire le grand titre du site, à savoir le titre du texte, suivi d'un trait qui occupe tout ce qu'il reste de la longueur, tel que
Lors du précédent tutoriel, l'astuce nécessitait d'avoir deux blocs HTML imbriqués, celle-ci à l'avantage de ne nécessiter qu'un seul bloc, tout le reste étant réalisé en CSS. Il est donc plus facile de l'intégrer sur du code déjà tout fait ou automatisé.
Imaginons un block sur lequel nous appliquons la classe de style "titre", écrivez les styles de votre titre, taille, couleur, épaisseur, etc ... que je ne mettrai pas ici
.titre {}
Maintenant, ajouter la pseudo-classe after, qui permettra d'ajouter le trait après le texte
.titre {} .titre:after {}
Pour que l'élément créé en after s'affiche, il faut commencer par lui mettre un contenu, même vide.
.titre {} .titre:after {content:"";}
Nous allons faire en sorte que le trait s'affiche après le texte. Pour cela il faut indiquer que le trait dispose d'une position absolue, par rapport à son parent, et pas par rapport à la page.
.titre {position:relative;} .titre:after {content:""; position:absolute;}
Pour que seul un trait s'affiche, nous allons lui donner une hauteur de 1 pixel, et lui appliquer une couleur de fond, ici un joli rouge pétant. Ainsi le bloc ressemblera à une ligne. Par sécurité, nous appliquons aussi une taille des caractères de 0px.
.titre {position:relative;} .titre:after {content:""; position:absolute; background:#cc3333; height:1px; font-size:0;}
Afin que la ligne aille jusqu'au bout, nous forçons sa taille à 100%. Mais comme il s'agit de 100% de l'espace original, et pas de l'espace restant, il faut cacher tout ce qu'il sort, dans le bloc original
.titre {position:relative; overflow:hidden;} .titre:after {content:""; position:absolute; background:#cc3333; height:1px; font-size:0; width:100%;}
Maintenant, il ne reste plus qu'à ajuster la position pour que le trait se mette sur la baseline. La valeur est donc à ajuster selon la taille de votre texte, et éventuellement la taille de la ligne de texte.
.titre {position:relative; overflow:hidden;} .titre:after {content:""; position:absolute; background:#cc3333; height:1px; font-size:0; width:100%; top:20px;}
Enfin, pour que cela soit plus joli, nous pouvons décoller le trait du texte
.titre {position:relative; overflow:hidden;} .titre:after {content:""; position:absolute; background:#cc3333; height:1px; font-size:0; width:100%; top:20px; margin-left:5px;}
Et voilà.
Évidemment, comme il s'agit de design, tout est ajustable. Ici nous avons fait un trait de toute la longueur, mais vous pourriez mettre un trait d'une taille fixe. Attention tout de même, si vous souhaitez un trait qui occupe 80% de l'espace, il faudra réduire la taille du bloc principal, et pas la taille bloc affichant le trait.
De mon côté, je n'ai plus qu'à reprendre les styles du site pour appliquer cette technique, infiniment plus facile à utiliser.
