Admin/Dev

14
Janv.
2021

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

Publié par sky

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

Le titre de la page sur skymac.org

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.

 
 
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.
Captcha indisponible
Pour valider le formulaire, vous devez confirmer que vous êtes bien une personne. Actuellement, la fonctionnalité est indisponible. Vous devez activer le service ReCaptcha dans le gestionnaire des cookies, et donc consentir à l'utilisation de ses cookies.
Ouvrir le panneau de gestion des cookies
Fermer le panneau
Ce site utilise des cookies pour assurer son bon fonctionnement. Il utilise aussi des cookies issues de services tiers permettant de proposer des fonctionnalités avancées. À tout moment, vous pouvez choisir quels services vous souhaitez activer ou refuser, afin de retirer votre consentement quant à l'utilisation des cookies.
 
Personnalisation des services
Vous êtes libre de choisir quels services vous souhaitez activer. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement. En retirant votre consentement pour certains de ces services, certaines fonctionnalités du site peuvent ne plus fonctionner.
Navigation du site  En savoir plus
Le site écrit un cookie de session permettant son bon fonctionnement et aidant à la navigation. Il ne peut être désactivé.
Utilisation : 1 cookie, enregistre l'identifiant de la session.
Durée de vie : Le cookie est présent pendant toute la session sur le site. Il devient obsolète après 24 minutes d'inactivité.
Obligatoire
Popup Média
Afficher des vidéos depuis Yoube ou Dailymotion.
ReCaptcha  En savoir plus
Permet de valider que les visiteurs sont bien des humains lorsqu'ils valident des formulaires.
 
Tout accepter Tout refuser Gérer