Effets de texte en CSS

Couleur du texte

La propriété color en CSS permet de définir la couleur des éléments de texte. Vous pouvez spécifier la couleur du texte en utilisant des formats comme les noms de couleurs, les valeurs hexadécimales, RGB et HSL.

Pour définir la couleur du texte, utilisez la propriété color suivie de la valeur de couleur souhaitée.

p {
  color: blue;
}

Tous les éléments <p> auront un texte de couleur bleue.

CSS fournit de nombreux noms de couleurs prédéfinis que vous pouvez utiliser, tels que red, green, blue, et yellow. Pour un contrôle plus précis des couleurs, vous pouvez utiliser des valeurs hexadécimales, RGB ou HSL.

Les valeurs hexadécimales sont représentées par un # suivi de six caractères. Chaque paire de caractères indique l'intensité des composantes rouge, verte et bleue.

• #ff0000 représente le rouge pur
• #00ff00 représente le vert pur
• #0000ff représente le bleu pur

Les valeurs RGB sont spécifiées en utilisant la fonction rgb() avec trois paramètres représentant les composantes rouge, verte et bleue (chacune allant de 0 à 255).

• rgb(255, 0, 0) représente le rouge pur
• rgb(0, 255, 0) représente le vert pur
• rgb(0, 0, 255) représente le bleu pur

Les valeurs HSL sont spécifiées en utilisant la fonction hsl() qui signifie teinte (angle de 0 à 360 degrés), saturation (pourcentage) et luminosité (pourcentage).

• hsl(120, 100%, 50%) est pour le vert
• hsl(240, 100%, 50%) est pour le bleu

Les couleurs de texte peuvent être héritées par les éléments enfants de leurs éléments parents, sauf si elles sont explicitement remplacées. La nature en cascade du CSS s'applique également aux couleurs de texte où les règles plus spécifiques ont la priorité.

<div class="parent">
   <p>Ce texte hérite de la couleur de son parent.</p>
   <p class="child">Ce texte a sa propre couleur.</p>
</div>

.parent {
    color: green;
}

.child {
    color: blue;
}

Le premier élément <p> aura un texte vert hérité du <div> parent. Le deuxième élément <p> avec la classe "child" aura un texte bleu en raison de la règle spécifique appliquée.

Alignement du texte

La propriété text-align en CSS vous permet de contrôler l'alignement horizontal du texte dans un élément. Vous pouvez aligner le texte à gauche, à droite, au centre, ou le justifier.

Pour définir l'alignement du texte, utilisez la propriété text-align suivie d'une de ces valeurs : left, right, center, ou justify.

p {
  text-align: center;
}

• text-align: left; aligne le texte sur le côté gauche de l'élément. C'est la valeur par défaut.
• text-align: right; aligne le texte sur le côté droit de l'élément.
• text-align: center; centre le texte dans l'élément.
• text-align: justify; étire le texte pour remplir toute la largeur d'un élément, créant un espacement uniforme entre les mots.

Vous pouvez également définir la direction en utilisant des propriétés comme direction et unicode-bidi. Celles-ci sont utiles pour les langues avec des directions d'écriture différentes comme l'arabe ou l'hébreu.

La propriété direction définit la direction tandis que la propriété unicode-bidi gère les textes bidirectionnels.

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

En combinant ces propriétés, vous pouvez contrôler à la fois l'alignement horizontal et la direction de votre contenu.

Décoration du texte

La propriété text-decoration en CSS vous permet d'ajouter des lignes à votre texte, telles que des soulignements, des surlignements ou des lignes barrées. Vous pouvez contrôler le style, la couleur et l'épaisseur de ces décorations.

Pour ajouter une décoration à votre texte, utilisez la propriété text-decoration suivie d'une ou plusieurs de ces valeurs : underline, overline, ou line-through.

p {
  text-decoration: underline;
}

h1 {
  text-decoration: overline;
}

a {
  text-decoration: line-through;
}

Vous pouvez également combiner plusieurs décorations en séparant les valeurs par un espace.

p {
  text-decoration: underline overline;
}

Pour contrôler davantage l'apparence des décorations, vous pouvez utiliser ces propriétés :

• text-decoration-line : Spécifie le type de décoration (underline, overline, line-through).
• text-decoration-color : Définit la couleur de la décoration.
• text-decoration-style : Détermine le style de la décoration (solid, double, dotted, dashed).

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Vous pouvez également définir l'épaisseur en utilisant text-decoration-thickness. Elle accepte des valeurs de longueur ou des mots-clés comme auto, from-font, ou thick.

p {
  text-decoration-line: overline;
  text-decoration-thickness: 5px;
}

Transformation de texte

La propriété text-transform en CSS vous permet de modifier la casse du texte. Vous pouvez transformer le texte en majuscules, en minuscules, ou mettre en majuscule la première lettre de chaque mot.

Pour transformer le texte, utilisez la propriété text-transform suivie d'une de ces valeurs : uppercase, lowercase, ou capitalize.

h1 {
  text-transform: uppercase;
}

p {
  text-transform: lowercase;
}

.title {
  text-transform: capitalize;
}

<p>Ceci est un paragraphe normal.</p>
<p class="uppercase">Ce paragraphe sera en majuscules.</p>
<p class="capitalize">ce paragraphe aura ses mots capitalisés.</p>

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

Les transformations de texte aident à maintenir une cohérence dans le style de casse pour certains éléments comme les titres ou les boutons sans avoir à les taper manuellement dans une casse spécifique.

La propriété text-transform ne change que l'apparence du texte et ne modifie pas son contenu réel. Les lecteurs d'écran et autres technologies d'assistance le lisent toujours dans sa casse d'origine.

Espacement du texte

CSS offre des propriétés pour contrôler l'espacement et le positionnement du texte, notamment l'espacement des lettres, l'espacement des mots, la hauteur de ligne et l'alignement vertical.

Pour ajuster l'espace entre les caractères, utilisez la propriété letter-spacing. Elle accepte des valeurs de longueur, positives ou négatives.

p {
  letter-spacing: 2px;
}

.tight {
  letter-spacing: -0.5px;
}

Les valeurs positives augmentent l'espace entre les caractères ; les valeurs négatives le diminuent. Cela aide à améliorer la lisibilité ou à créer des styles typographiques spécifiques.

Pour contrôler l'espace blanc entre les mots, utilisez la propriété word-spacing. Elle accepte également des valeurs de longueur.

p {
  word-spacing: 10px;
}

.narrow {
  word-spacing: -2px;
}

Augmenter l'espacement des mots peut améliorer la lisibilité des textes plus longs. Le diminuer peut créer un aspect plus compact.

La propriété line-height définit la hauteur de chaque ligne de texte. Elle accepte des valeurs de longueur, des pourcentages ou des valeurs sans unité.

p {
  line-height: 1.5;
}

.tall {
  line-height: 200%;
}

Ajuster la hauteur de ligne peut améliorer la lisibilité en fournissant suffisamment d'espace vertical entre les lignes et affecte le rythme visuel global.

La propriété vertical-align contrôle l'alignement vertical des éléments en ligne les uns par rapport aux autres ou par rapport à la ligne de base de leur conteneur. Les valeurs courantes incluent baseline, top, middle, et bottom.

img {
  vertical-align: middle;
}

.subscript {
  vertical-align: sub;
}

L'alignement vertical est utile pour aligner des éléments en ligne comme des images ou des icônes avec le texte environnant.

Ombre de texte

La propriété text-shadow en CSS permet de créer des effets d'ombre pour les éléments de texte. Vous pouvez spécifier le décalage de l'ombre, le rayon de flou et la couleur pour obtenir divers effets visuels.

Pour créer une ombre de texte, utilisez la propriété text-shadow suivie des valeurs représentant le décalage horizontal, le décalage vertical, le rayon de flou et la couleur.

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

La propriété text-shadow accepte plusieurs valeurs séparées par des virgules :

• Décalage horizontal : Spécifie la distance horizontale de l'ombre par rapport au texte. Les valeurs positives déplacent l'ombre vers la droite ; les valeurs négatives la déplacent vers la gauche.
• Décalage vertical : Spécifie la distance verticale de l'ombre par rapport au texte. Les valeurs positives la déplacent vers le bas ; les valeurs négatives la déplacent vers le haut.
• Rayon de flou (optionnel) : Détermine le degré de flou appliqué à l'ombre. Une valeur plus grande crée un effet plus doux et plus diffus.
• Couleur : Définit la couleur de l'ombre en utilisant des noms ou des valeurs hexadécimales/RGB/HSL.

p {
  text-shadow: -2px -2px 0 red, 2px 2px 0 blue;
}

Les ombres de texte peuvent améliorer la lisibilité lorsqu'elles sont utilisées sur des arrière-plans à faible contraste, mais utilisez-les avec modération car des ombres excessives ou à faible contraste peuvent gêner la lisibilité pour certains utilisateurs.

h2 {
    text-shadow: 
        -3px -3px #ff0000,
         -6px -6px #00ff00,
         -9px -9 px #0000ff;
}

Débordement de texte

CSS offre des propriétés pour gérer les situations où le texte déborde de son conteneur. Vous pouvez contrôler l'affichage du texte qui déborde en utilisant les propriétés overflow, white-space, et text-overflow.

La propriété overflow détermine ce qui se passe lorsque le contenu dépasse les dimensions de son conteneur. Elle accepte des valeurs telles que visible (par défaut), hidden, scroll, ou auto.

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

Le texte à l'intérieur de l'élément .container sera coupé et caché s'il déborde.

La propriété white-space contrôle la gestion des espaces blancs et des retours à la ligne dans un élément. La valeur nowrap empêche le texte de passer à la ligne, provoquant un débordement s'il dépasse la largeur du conteneur.

p {
  white-space: nowrap;
}

Le texte à l'intérieur des éléments <p> ne passera pas à la ligne suivante, ce qui peut entraîner un débordement horizontal du conteneur.

Pour tronquer le texte qui déborde avec des points de suspension (...), vous pouvez utiliser la propriété text-overflow en combinaison avec overflow et white-space.

.truncate {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Le texte à l'intérieur des éléments avec la classe .truncate sera tronqué avec des points de suspension s'il dépasse la largeur de 200 pixels.

En combinant ces propriétés (overflow: hidden, white-space: nowrap, et text-overflow: ellipsis), vous créez une seule ligne de texte qui est tronquée lorsqu'elle déborde.

Pour créer des conteneurs de texte réactifs qui s'adaptent à différentes tailles d'écran, vous pouvez utiliser des unités relatives comme les pourcentages ou les unités vh/vw pour les dimensions.

.responsive-container {
  width: 100%;
  max-height: 50vh;
  overflow: auto;
}

L'élément .responsive-container aura une largeur égale à celle de son parent et une hauteur maximale de la moitié de la hauteur de la fenêtre. Si le texte dépasse cette hauteur maximale, une barre de défilement apparaîtra.

Enveloppement du texte

CSS fournit des propriétés pour contrôler comment le texte s'enveloppe dans un élément, notamment white-space, word-wrap, word-break, overflow-wrap, et hyphens.

La propriété white-space détermine comment les espaces blancs et les sauts de ligne à l'intérieur d'un élément sont gérés. Elle accepte des valeurs telles que normal, nowrap, pre, pre-wrap, et pre-line.

p {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

Les éléments <p> ne passeront pas le texte à la ligne suivante, provoquant un débordement si le texte est plus long que la largeur du conteneur. Les éléments avec la classe .pre préserveront les espaces blancs et les sauts de ligne tels qu'ils apparaissent dans le code source.

Pour contrôler si les mots longs doivent se casser ou déborder, utilisez la propriété word-wrap. Elle accepte des valeurs comme normal (par défaut) ou break-word.

p {
  word-wrap: break-word;
}

Les mots longs à l'intérieur des éléments <p> se casseront et passeront à la ligne suivante s'ils dépassent la largeur du conteneur.

La propriété word-break spécifie comment les mots doivent se casser lorsqu'ils atteignent la fin d'une ligne. Elle accepte des valeurs comme 'normal', 'break-all', et 'keep-all'.

.url {
  word-break: break-all;
}

.keep {
  word-break: keep-all;
}

Les éléments avec la classe .url casseront les mots et les URLs à n'importe quel caractère pour éviter le débordement. Les éléments avec la classe .keep empêcheront les coupures de mots entre les lettres, gardant les mots entiers ensemble.

La propriété 'overflow-wrap' (anciennement connue sous le nom de 'word-wrap') détermine si un mot long doit se casser ou déborder lorsqu'il atteint le bord du conteneur. Elle accepte des valeurs comme 'normal' (par défaut) ou 'anywhere'.

p { 
    overflow-wrap: anywhere; 
} 

Les mots longs à l'intérieur des éléments <p> peuvent se casser à n'importe quel point si nécessaire pour éviter le débordement.

Pour appliquer des traits d'union au texte enveloppé, utilisez la propriété hyphens. Elle accepte des valeurs comme 'none' (par défaut), 'manual', et 'auto'.

 p { 
    hyphens: auto;
} 

Le texte enveloppé à l'intérieur des éléments <p> aura automatiquement des traits d'union insérés aux points appropriés si la langue et le navigateur le prennent en charge.

L'utilisation judicieuse de ces propriétés aide à maintenir une expérience de lecture optimale, en tenant compte de la langue du contenu et des navigateurs cibles.

Effets de texte et techniques

Le CSS offre des propriétés et des techniques qui permettent de créer des effets visuels sur les éléments de texte. Voici quelques-unes de ces techniques, notamment la création de dégradés et de motifs sur le texte, l'application de contours de texte, et l'utilisation de masquage et de découpage de texte.

Pour créer des dégradés ou appliquer des motifs au texte, utilisez la propriété background-clip avec la propriété text-fill-color. La propriété background-clip définit jusqu'où l'arrière-plan doit s'étendre dans un élément. En définissant sa valeur à text, l'arrière-plan sera découpé selon la forme du texte.

h1 {
  background-image: linear-gradient(to right, #ff0000, #0000ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

p {
  -webkit-text-stroke: 2px #000000;
  text-stroke: 2px #000000;
}

h1 {
  clip-path: polygon(0% 0%,100% 0%,100%80%,0%100%);
}

p {
  mask-image: url('mask.png');
  mask-size: cover;  
  mask-repeat: no-repeat;
}