OUJOOD.COM
Les effets de texte en CSS3
CSS3 cours tutorialAvant CSS3, coller une ombre sous un titre impliquait Photoshop : exporter une image, la servir à la place du texte, tout recommencer au moindre changement de contenu. text-shadow règle ça en une ligne. Ombres classiques, lueurs néon, illusions 3D — tout se contrôle directement dans la feuille de style, sans quitter l'éditeur.
word-wrap (rebaptisée overflow-wrap dans les specs modernes) s'attaque à un autre classique : le mot trop long qui dépasse son conteneur. Une URL, un terme technique, un composé franco-français — n'importe lequel peut fracturer une mise en page sur mobile si rien ne les retient. Une propriété, un problème réglé.
Compatibilité navigateurs
Les deux propriétés fonctionnent dans tous les navigateurs actuels — Chrome, Firefox, Safari, Opera, Edge. text-shadow ne fonctionnait pas sous Internet Explorer 9 et ses versions antérieures. En 2026, IE représente moins de 0,3 % du trafic mondial : c'est un cas que la majorité des projets peut ignorer sans risque.
Étape 1 — Ajouter une ombre simple avec text-shadow
text-shadow est une définition atomique : c'est la propriété CSS qui applique une ou plusieurs ombres directement sur du texte, sans image ni logiciel externe. Elle prend quatre valeurs dans l'ordre :
- décalage horizontal — positif vers la droite, négatif vers la gauche
- décalage vertical — positif vers le bas, négatif vers le haut
- rayon de flou — plus la valeur est grande, plus l'ombre est diffuse
- couleur de l'ombre
Syntaxe : text-shadow: décalageX décalageY flou couleur;. Le premier exemple place une ombre rouge 2px à droite et 2px en dessous du texte, avec un léger flou :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Effet de texte</title>
<style>
/* Ombre rouge décalée de 2px en X et en Y, flou de 2px */
h1 { text-shadow: 2px 2px 2px #FF0000; }
</style>
</head>
<body>
<h1>TIEN VOICI UN TEXTE AVEC UNE OMBRE</h1>
</body>
</html>
Résultat attendu :
TIEN VOICI UN TEXTE AVEC UNE OMBRE ↳ Le titre s'affiche avec une ombre rouge légèrement décalée en bas à droite.
Les 2px de flou adoucissent les contours de l'ombre sans la faire disparaître. Passez à 8px ou 10px pour un effet beaucoup plus diffus.
Étape 2 — Empêcher un mot de déborder avec word-wrap
Par défaut, un mot trop long pour son conteneur dépasse simplement. Ce comportement casse visuellement la mise en page, particulièrement dans des colonnes étroites ou sur mobile. word-wrap: break-word — alias overflow-wrap: break-word dans les specs actuelles — demande au navigateur de couper le mot là où la place manque, plutôt que de le laisser déborder.
Le mot « anticonstitutionnellement » (25 lettres, le plus long mot courant du français) illustre bien le problème dans un conteneur étroit :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>word-wrap CSS3</title>
<style>
p.test {
width: 8em;
border: 1px solid #000000;
/* Force le retour à la ligne si le mot dépasse la largeur */
word-wrap: break-word;
}
</style>
</head>
<body>
<p class="test">Voici le mot anticonstitutionnellement dans un conteneur de 8em.</p>
</body>
</html>
Résultat attendu :
┌──────────────┐ │ Voici le mot │ │ anticonsti- │ │ tutionnelle- │ │ ment dans un │ │ conteneur de │ │ 8em. │ └──────────────┘
Sans word-wrap: break-word, le mot « anticonstitutionnellement » déborderait à droite du cadre. Avec la propriété, le navigateur le coupe proprement à la limite du conteneur.
⚠ La propriété word-wrap est un alias conservé pour la compatibilité. Dans du CSS moderne, privilégiez overflow-wrap: break-word — les deux fonctionnent, mais overflow-wrap est le nom officiel dans les specs actuelles.
Étape 3 — Créer une lueur néon avec text-shadow
Pour un effet néon, la logique est inverse à l'ombre portée classique : les décalages passent à zéro, et c'est le flou qui fait tout le travail avec une couleur saturée. L'ombre ne se déplace pas — elle rayonne autour du texte :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Lueur néon CSS3</title>
<style>
body { background: #111; }
h1 {
color: #00ffff;
/* 0 décalage + flou 3px + couleur cyan = rayonnement néon */
text-shadow: 0 0 3px #00ffff;
}
</style>
</head>
<body>
<h1>Text-shadow avec une lueur néon</h1>
</body>
</html>
Résultat attendu :
Le titre s'affiche en cyan sur fond sombre, entouré d'un halo lumineux diffus — l'effet néon typique des enseignes lumineuses.
Le fond sombre est important ici : l'effet néon ne se voit pratiquement pas sur fond blanc. Augmentez le flou à 8px ou 10px pour accentuer le rayonnement.
Étape 4 — Rendre un texte blanc lisible avec une ombre noire
Texte blanc sur fond clair ? Sans ombre, les deux se fondent. Une ombre noire légèrement floutée suffit à créer le contraste nécessaire quelle que soit la couleur de fond :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Texte blanc lisible CSS3</title>
<style>
h1 {
color: white;
/* Ombre noire floutée = lisibilité sur n'importe quel fond */
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Text-shadow appliqué à un texte en blanc</h1>
</body>
</html>
Résultat attendu :
Le titre blanc s'affiche avec une ombre noire diffuse derrière chaque lettre — le contraste rend le texte lisible même sur fond blanc ou clair.
Le rayon de flou à 4px est intentionnellement plus grand que dans l'exemple de base : une ombre nette sur du blanc ferait un effet pixélisé peu élégant. Plus de flou = ombre plus discrète et plus efficace.
Étape 5 — Simuler un effet 3D avec plusieurs ombres empilées
CSS3 accepte plusieurs ombres sur le même élément, séparées par des virgules. En décalant progressivement position et couleur, on crée une illusion de volume. Chaque couche ajoute un "niveau" de profondeur perçue :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Texte 3D CSS3</title>
<style>
h2 {
width: 320px;
background: #ff4455;
padding: 10px;
margin: 0;
font: bold 45px Arial, sans-serif;
color: #fff;
/* 5 ombres décalées d'1px à chaque couche : illusion de profondeur */
text-shadow:
1px 1px 0 #ccc,
2px 2px 0 #c9c9c9,
3px 3px 0 #bbb,
4px 4px 0 #b9b9b9,
5px 5px 0 #aaa,
0 5px 15px rgba(0,0,0,.50);
}
</style>
</head>
<body>
<h2>TEXTE EN 3D</h2>
</body>
</html>
Résultat attendu :
Le titre "TEXTE EN 3D" en blanc sur fond rouge s'affiche avec une profondeur visible : les couches grises successives donnent l'impression que les lettres sont en relief, avec une ombre portée diffuse à la base.
La dernière ligne (0 5px 15px rgba(0,0,0,.50)) est la touche finale : une ombre portée globale sous tout le bloc qui ancre les lettres au fond. Sans elle, l'effet 3D semble flotter.
Récapitulatif : toutes les propriétés en un seul fichier
Voici les cinq exemples réunis dans une seule page HTML pour tester et comparer directement :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>text-shadow et word-wrap — récapitulatif</title>
<style>
body { background: #1a1a2e; color: #eee; font-family: Arial, sans-serif; padding: 20px; }
/* Étape 1 : ombre rouge basique */
.ombre-base { text-shadow: 2px 2px 2px #FF0000; }
/* Étape 2 : word-wrap pour les mots longs */
p.debordement {
width: 8em;
border: 1px solid #eee;
padding: 4px;
word-wrap: break-word;
/* alias moderne : overflow-wrap: break-word; */
}
/* Étape 3 : lueur néon */
.neon { color: #00ffff; text-shadow: 0 0 3px #00ffff; }
/* Étape 4 : texte blanc lisible */
.blanc { color: white; text-shadow: 2px 2px 4px #000000; }
/* Étape 5 : effet 3D avec ombres empilées */
.three-d {
font: bold 45px Arial, sans-serif;
color: #fff;
background: #ff4455;
padding: 10px;
display: inline-block;
text-shadow:
1px 1px 0 #ccc,
2px 2px 0 #c9c9c9,
3px 3px 0 #bbb,
4px 4px 0 #b9b9b9,
5px 5px 0 #aaa,
0 5px 15px rgba(0,0,0,.50);
}
</style>
</head>
<body>
<h1 class="ombre-base">Étape 1 — Ombre rouge basique</h1>
<p>Étape 2 — word-wrap :</p>
<p class="debordement">Le mot anticonstitutionnellement dans 8em.</p>
<h2 class="neon">Étape 3 — Lueur néon cyan</h2>
<h2 class="blanc">Étape 4 — Texte blanc avec ombre noire</h2>
<h2 class="three-d">TEXTE EN 3D</h2>
</body>
</html>
Par carabde : 10 mars 2014 | Mis à jour le 10 juin 2026