logo oujood
🔍

CSS3 : text-shadow et word-wrap, les effets de texte essentiels

Deux propriétés CSS3 incontournables : text-shadow pour ajouter ombres et effets visuels à vos textes, et word-wrap pour éviter qu'un mot trop long ne casse votre mise en page. Exemples à l'appui.
text-shadow
word-wrap

OUJOOD.COM

Les effets de texte en CSS3

CSS3 cours tutorial

Avant CSS3, une ombre sous un titre passait par Photoshop : exporter une image, la servir à la place du texte, et recommencer à chaque changement de contenu. text-shadow règle ça en une ligne de CSS. Ombres, lueurs, effets 3D — tout se gère directement dans la feuille de style.

word-wrap (rebaptisée overflow-wrap dans les specs modernes) résout un autre problème classique : un mot trop long — une URL, un terme technique, un mot composé — qui dépasse son conteneur et casse la mise en page. 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 les versions antérieures — en 2026, c'est un cas marginal pour la quasi-totalité des projets.

CSS3 text-shadow : ajouter une ombre à un texte

text-shadow applique une ou plusieurs ombres directement sur du texte. Pas d'image, pas de logiciel externe : tout se passe dans votre feuille de style. La propriété 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 douce et diffuse
  • couleur de l'ombre

Syntaxe de base : text-shadow: décalageX décalageY flou couleur;. Un premier exemple concret avec une ombre rouge, décalée de 2px en horizontal et en vertical :

  📋 Copier le code

<!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>

CSS3 word-wrap : gérer les mots qui débordent

Par défaut, un mot trop long pour son conteneur dépasse simplement. Ce comportement casse visuellement la mise en page, surtout dans des colonnes étroites ou sur mobile. word-wrap: break-word — aussi écrit overflow-wrap: break-word dans les specs actuelles — dit au navigateur de couper le mot à la ligne si nécessaire.

C'est particulièrement utile pour les URLs longues, les termes techniques ou les mots composés. Le mot « anticonstitutionnellement » fait un bon cas de test :

  📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Effet de texte</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">Tien voici un texte avec le mot anticonstitutionnellement qui devrait être brisé.
</p>
</body>
</html>

Aller plus loin avec text-shadow

text-shadow va bien au-delà de l'ombre portée classique. En jouant sur le flou et la couleur, on crée des effets lumineux. En empilant plusieurs ombres dans une même déclaration (séparées par des virgules), on obtient des effets 3D crédibles. Trois variations pratiques ci-dessous.

Exemple : lueur néon

Pour un effet néon, les décalages passent à zéro et le flou monte avec une couleur saturée. L'ombre ne se déplace pas — elle rayonne autour du texte :

  📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Effet de texte</title>
<style>
h1 {
    /* 0 décalage + flou 3px + couleur cyan = lueur néon */
    text-shadow: 0 0 3px #00ffff;
}
</style>
</head>
<body>
<h1>Text-shadow avec une lueur néon</h1>
</body>
</html>

Exemple : texte blanc avec ombre sombre

Texte blanc sur fond clair ? Sans ombre, il disparaît. Une ombre noire légèrement floutée suffit à le rendre lisible quelle que soit la couleur derrière :

  📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Effet de texte</title>
<style>
h1 {
    color: white;
    /* Ombre noire pour rendre le texte blanc visible */
    text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Text-shadow appliqué à un texte en blanc</h1>
</body>
</html>

Exemple : effet 3D avec plusieurs ombres empilées

CSS3 permet 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 profondeur. C'est plus verbeux, mais l'effet marche vraiment bien sur des grands titres :

  📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Effet de texte</title>
<style>
h2 {
    width: 320px;
    background: #ff4455;
    padding: 10px;
    margin: 0;
    font: bold 45px Arial, sans-serif;
    color: #fff;
    /* Cinq ombres décalées d'1px à chaque couche = profondeur 3D */
    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>

Par carabde 10 mars 2014 | Mis à jour le 28 avril 2026

chapitre précédent     chapitre suivant