Yes You Web !

— Publié le 14 décembre 2019 —

Pour ne pas avoir un site identique aux autres, nous vous expliquons aujourd’hui comment personnaliser les titres, sous-titres et textes de vos pages grâce aux CSS3. Il suffit parfois de pas grand chose pour dynamiser votre site internet et lui donner un aspect moderne.

Dans cet article, nous allons étudier les possibilités suivantes.

Cette liste n’est pas exhaustive, nous nous sommes concentrés ici sur le texte en lui même et non son positionnement par rapport à d’autres éléments. Vous pouvez aussi animer vos textes, les transformer… Si cela vous intéresse, signalez-le nous en commentaires et nous écrirons un article sur ce sujet).

Couleur et opacité

Pour se mettre en jambe, nous allons commencer par le plus simple, mettre un titre en couleur avec ou sans transparence sur le titre. Bien entendu, nous prenons l’exemple d’un titre 3, h3, mais vous pouvez adapter ces CSS à d’autres balises texte.

Titre en couleur

Il s’agit juste ici de passer un titre en vert au lieu de la couleur par défaut de votre thème ou du corps du site (body). Vous pouvez utiliser la couleur en code hexadécimal ou rgb, comme vous voulez.

Titre en couleur
Copier

Titre avec opacité

On parle d’opacité alors qu’en réalité, il s’agit d’apporter de la transparence au titre. Gardons le vert utilisé précédemment et apportons lui 50% de transparence. On est obligé de convertir notre couleur en rgb (de nombreux convertisseurs existent, demandez à votre moteur de recherche préféré) et la dernière valeur représente l’opacité. Ici, O.5. La valeur doit varier entre 0 et 1, plus vous approchez 1, plus votre titre est opaque.

Titre en couleur
Copier

Espacement

Nous aimons bien jouer sur l’interlettrage car cela donne facilement un titre un peu classe, surtout si vous le combiné avec une graisse « light ». L’interlettrage en CSS, c’est le letter-spacing, il s’exprime en px ou en em et peut également accepter des valeurs négatives pour, au contraire, resserrer le texte.

Titre sans interlettrage

Titre avec interlettrage
Copier

Soulignement

Soyez prudents avec les soulignements inférieurs car souvent ils servent à indiquer un lien. Utilisez-les avec pertinence afin de ne pas perturber vos visiteurs. En revanche, saviez-vous qu’on pouvait barrer le texte, placer le soulignement au dessus ou de part et d’autre du texte ? Vous pouvez également changer la couleur du soulignement et son style : trait régulier, double-trait, pointillés, tirets ou vagues… Voyons tout cela. Nous allons utiliser différents types de CSS mais qui peuvent utilisés indépendamment ou toutes être regroupées dans text-decoration. Voici les valeurs de ces propriétés :

  • text-decoration-color : couleur en hexadecimal ou rgb
  • text-decoration-style : solid, wavy, dotted, dashed ou double
  • text-decoration-line : underline, overline, line-through. On peut mettre à la suite underline et overline pour avec l’effet soulignement supérieur et inférieur.

Voyons quelques exemples.

Types de soulignements

On va d’abord jouer sur le text-decoration-line.

Titre avec soulignement
Copier
Titre avec soulignement
Copier
Titre avec soulignement
Copier
Titre avec soulignement
Copier

Styles de soulignements

Jouons maintenant sur un soulignement inférieur avec les autres styles. Pour le moment, nous étions en « solid ». Vous pouvez ensuite tout combiner.

Titre avec soulignement
Copier
Titre avec soulignement
Copier
Titre avec soulignement
Copier
Titre avec soulignement
Copier

Ombres

Les ombres sur du texte se font selon 2 axes : horizontal (de gauche à droite) puis vertical (de haut en bas), puis la couleur. Tout comme les ombres sur les blocs, on peut également leur donner une valeur de flou.

Voici quelques exemples :

  • Tout d’abord, une ombre noire sans flou qui part 3 px à droite et 2px en bas
  • Puis une ombre noire qui a un flou de 3px avec une transparence de 70%
  • Et enfin un exemple avec 2 ombres : d’abord une blanche puis une grise.

Les possibilités sont infinies…

TITRE AVEC OMBRE
Copier
TITRE AVEC OMBRE
Copier
TITRE AVEC OMBRE
Copier

Dégradés

Utiliser un dégradé sur votre titre peut être très sympa à condition d’utiliser des couleurs de début et de fin qui s’accordent bien ensemble. Copiez le code ci-dessous. Nous indiquons que le dégradé s’effectue vers la droite. La 1ère valeur hexadécimale est le turquoise de gauche et du noir à droite. On peut cumuler le dégradé avec de la transparence ou changer l’orientation.

TITRE AVEC DEGRADE
Copier

Pseudo Eléments

Terminons par les Pseudo Elements qui sont un tout petit peu plus complexes. Ils vont vous permettre :

  • de mettre en couleur la 1ère ligne d’un texte par exemple et ce quel que soit le type d’écran : en effet la 1ère ligne sur mobile ne compte pas le même nombre de mots que sur desktop
  • de mettre en couleur la 1ère lettre d’un paragraphe
  • d’ajouter des icônes avant ou après votre titre.

Si vous êtes intéressés par cette catégorie de CSS, nous vous invitons à lire notre article dédié à ce sujet : Utiliser les pseudo éléments en CSS.

Conclusion

Voilà, vous avez de quoi vous amuser maintenant avec vos titres et sous-titres ! Si vous voulez voir la liste complète des CSS disponibles, nous vous invitons à consulter notre guide de référence : CSS3 : guide de référence des propriétés et de leurs valeurs.
Si vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !