Chargement...

Effets de texte en CSS

Vous savez déjà aligner, décorer et charger des polices. Les effets de texte ajoutent une finition — une ombre douce, des points de suspension quand l’espace manque, ou une coupure pour les longues chaînes gênantes. Gardez-les légers pour que le texte reste lisible.

Une petite boîte à outils

📊 Effets de texte en un coup d’œil

Outil Rôle au quotidien
text-shadow Profondeur ou lueur douce derrière les glyphes (décalage, flou, couleur)
text-overflow Comment finit le texte coupé — souvent ellipsis (…)
overflow + white-space Partenaires dont l’ellipsis a besoin (hidden + nowrap)
overflow-wrap Coupe les mots/URL longs pour qu’ils tiennent dans la boîte
writing-mode Fait courir le texte dans une autre direction (ex. vertical)

Les effets sont un assaisonnement, pas le plat. Un titre peut aimer une ombre calme ; un long paragraphe a rarement besoin de feux d’artifice.

text-shadow — décalage, flou, couleur

L’ordre est en général décalage horizontal, vertical, rayon de flou, puis couleur. De petites valeurs restent calmes ; un flou énorme salit les lettres.

text-shadow de base

css
CSS Code 
.hero-title {
color: #1a1a1a;
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

Ombres en couches

Vous pouvez lister plusieurs ombres séparées par des virgules — utile pour un léger relief sans contour dur.

Deux couches douces

css
CSS Code 
.card-title {
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2);
}

Points de suspension quand le texte est trop large

text-overflow: ellipsis ne marche qu’avec une coupe : en général overflow: hidden et white-space: nowrap sur une boîte de largeur limitée.

Ellipsis sur une étiquette étroite

css
CSS Code 
.label {
max-width: 12rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

overflow-wrap — dompter les longs mots

Une longue URL ou une chaîne sans espaces peut faire exploser une colonne étroite. overflow-wrap: break-word (ancien alias word-wrap) laisse le navigateur couper dans le mot si besoin.

Couper les longues chaînes

css
CSS Code 
.note {
max-width: 20rem;
overflow-wrap: break-word;
}

writing-mode — un aperçu vertical

writing-mode change la progression des lignes. Les valeurs verticales conviennent aux étiquettes latérales ou titres décoratifs — pas aux paragraphes du quotidien.

Aperçu de texte vertical

css
CSS Code 
.side-label {
writing-mode: vertical-rl;
letter-spacing: 0.05em;
}

Une habitude calme pour les titres

Une ombre douce sur un titre court suffit souvent. Évitez une lueur lourde sur le corps, et réservez l’ellipsis aux endroits vraiment étroits.

Finition légère du titre

css
CSS Code 
h2.section-title {
font-size: 1.5rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

À vous de jouer

  1. Ajoutez un text-shadow doux à un titre (petits décalages, flou modeste).
  2. Empilez une seconde ombre plus légère avec une virgule.
  3. Construisez une étiquette ellipsis : max-width, overflow: hidden, nowrap, ellipsis.
  4. Mettez une longue URL dans une boîte étroite avec overflow-wrap: break-word.
  5. Essayez writing-mode: vertical-rl sur une courte étiquette latérale — puis revenez à la lecture normale.

Erreurs fréquentes

  • Multi-ombres néon sur de longs paragraphes (difficiles à lire)
  • Mettre text-overflow: ellipsis sans overflow: hidden et nowrap
  • Casser chaque mot avec un word-break agressif alors que overflow-wrap suffit
  • Utiliser l’écriture verticale pour des articles entiers
  • Mélanger cette leçon avec @font-face / chargement de polices web (leçon précédente)

Résumé

  • text-shadow utilise décalage, flou et couleur — gardez des valeurs modestes
  • Plusieurs ombres peuvent se superposer pour un relief doux
  • L’ellipsis a besoin de overflow, nowrap et d’une largeur limitée
  • overflow-wrap aide les longs mots et URL
  • writing-mode est un outil spécialisé ; le corps reste horizontal

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 29 de 35
Css Tutoriel