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.
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.
 
Tout accepter Tout refuser Gérer