OUJOOD.COM
Tutoriel CSS : text-shadow
La propriété CSS text-shadow permet d'ajouter une ombre au texte d'un élément HTML. Elle est utile pour créer des effets visuels intéressants et améliorer la lisibilité du texte.
Définition
La propriété text-shadow spécifie l'ombre à appliquer au texte d'un élément. L'ombre est dessinée derrière le texte, donnant l'illusion de profondeur et de relief.
Syntaxe générale
La syntaxe de base pour la propriété text-shadow est la suivante :
text-shadow: x-offset y-offset blur color;
| Valeurs par défaut | none |
|---|---|
| Inherited: | oui |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.textShadow="2px 5px 5px red" |
Valeurs possibles
Voici les valeurs possibles pour la propriété text-shadow :
- none : Valeur par défaut. Pas d'ombre.
- x-offset : spécifie la position horizontale de l'ombre par rapport au texte.
- y-offset : spécifie la position verticale de l'ombre par rapport au texte.
- blur : spécifie l'effet de flou (blur) de l'ombre. Une valeur plus élevée donnera une ombre plus étendue.
- color : spécifie la couleur de l'ombre.Consultez les Valeurs de couleur CSS pour une liste complète des valeurs de couleur possibles
- blur-radius : Facultatif. Le rayon de flou. La valeur par défaut est 0
Exemples pratiques d'utilisation
La propriété text-shadow peut être utilisée de différentes manières pour créer des effets visuels intéressants. Voici quelques exemples pratiques :
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
text-shadow: -1px -1px 2px #999;
text-shadow: 0 0 10px red;
text-shadow: 1px 1px 2px #333;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
text-shadow: -2px -2px 0 #fff, 2px 2px 0 #000;
Exemple d'utilisation de la propriété CSS text-shadow pour des effets de texte
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tutoriel sur text-shadow</title>
<style>
.simple {
background: #91877b;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.otto {
background: #0e8dbc;
color: white;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.relief {
background-color: #3a50d9;
color: #e0eff2;
font: italic bold 100px Georgia, Serif;
text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
}
.close {
background-color: #fff;
color: #202c2d;
text-shadow:
0 1px #808d93,
-1px 0 #cdd2d5,
-1px 2px #808d93,
-2px 1px #cdd2d5,
-2px 3px #808d93,
-3px 2px #cdd2d5,
-3px 4px #808d93,
-4px 3px #cdd2d5,
-4px 5px #808d93,
-5px 4px #cdd2d5,
-5px 6px #808d93,
-6px 5px #cdd2d5,
-6px 7px #808d93,
-7px 6px #cdd2d5,
-7px 8px #808d93,
-8px 7px #cdd2d5;
}
.printers {
background-color: #edde9c;
color: #bc2e1e;
text-shadow:
0 1px 0px #378ab4,
1px 0 0px #5dabcd,
1px 2px 1px #378ab4,
2px 1px 1px #5dabcd,
2px 3px 2px #378ab4,
3px 2px 2px #5dabcd,
3px 4px 2px #378ab4,
4px 3px 3px #5dabcd,
4px 5px 3px #378ab4,
5px 4px 2px #5dabcd,
5px 6px 2px #378ab4,
6px 5px 2px #5dabcd,
6px 7px 1px #378ab4,
7px 6px 1px #5dabcd,
7px 8px 0px #378ab4,
8px 7px 0px #5dabcd;
}
.glow {
color: #444;
text-shadow:
1px 0px 1px #ccc, 0px 1px 1px #eee,
2px 1px 1px #ccc, 1px 2px 1px #eee,
3px 2px 1px #ccc, 2px 3px 1px #eee,
4px 3px 1px #ccc, 3px 4px 1px #eee,
5px 4px 1px #ccc, 4px 5px 1px #eee,
6px 5px 1px #ccc, 5px 6px 1px #eee,
7px 6px 1px #ccc;
}
.vamp {
color: #92a5de;
background: red;
text-shadow:0px 0px 0 rgb(137,156,213),1px 1px 0 rgb(129,148,205),2px 2px 0 rgb(120,139,196),3px 3px 0 rgb(111,130,187),4px 4px 0 rgb(103,122,179),5px 5px 0 rgb(94,113,170),6px 6px 0 rgb(85,104,161),7px 7px 0 rgb(76,95,152),8px 8px 0 rgb(68,87,144),9px 9px 0 rgb(59,78,135),10px 10px 0 rgb(50,69,126),11px 11px 0 rgb(42,61,118),12px 12px 0 rgb(33,52,109),13px 13px 0 rgb(24,43,100),14px 14px 0 rgb(15,34,91),15px 15px 0 rgb(7,26,83),16px 16px 0 rgb(-2,17,74),17px 17px 0 rgb(-11,8,65),18px 18px 0 rgb(-19,0,57),19px 19px 0 rgb(-28,-9,48), 20px 20px 0 rgb(-37,-18,39),21px 21px 20px rgba(0,0,0,1),21px 21px 1px rgba(0,0,0,0.5),0px 0px 20px rgba(0,0,0,.2);
}
</style>
</head>
<body>
<h1 class="simple">
La purée de monstres
</h1>
<h1 class="otto">
Gluant Glissant
</h1>
<h1 class="relief">
Maman Momie
</h1>
<h1 class="close">
Écrasement du Cimetière
</h1>
<h1 class="printers">
Équipe de
Squelettes
</h1>
<h1 class="glow">
Zombie Lisse
</h1>
<h1 class="vamp">
Journal d'un Vampire
</h1>
</body>
</html>
Ce code HTML contient une page web avec des styles CSS appliqués à différents éléments `<h1>`. Chaque élément `<h1>` a une classe CSS spécifique qui détermine son apparence visuelle. Par exemple, la classe "simple" définit un fond de couleur avec une ombre de texte, la classe "relief" définit un fond de couleur et une police en italique avec une ombre de texte spécifique, etc.
En utilisant ces classes CSS, les titres des sections sont stylisés avec différents effets visuels tels que des ombres, des fonds colorés et des couleurs de texte spécifiques.
Cet exemple montre qu'on peut créer des effets 3D rien qu'avec la propriété css text-shadow.
Astuces et conseils d'utilisation
Voici quelques astuces et conseils pour utiliser au mieux la propriété text-shadow :
- Expérimentez avec différentes valeurs d'ombre pour trouver l'effet souhaité. Jouez avec les valeurs de décalage (x-offset et y-offset), de flou (blur) et de couleur (color) pour obtenir le résultat désiré.
- Utilisez des valeurs négatives pour créer des ombres dans la direction opposée au texte.
- Combinez plusieurs ombres en utilisant des virgules pour séparer les différentes valeurs d'ombre. Cela vous permettra de créer des effets complexes.
- Utilisez des valeurs de couleur semi-transparentes (RGBA) pour obtenir des ombres plus douces et subtiles.
- Évitez d'utiliser des ombres trop prononcées ou de couleurs vives, car cela peut rendre le texte illisible.
- Veillez à ce que l'ombre ne se superpose pas au texte lui-même. Assurez-vous qu'il y a suffisamment de contraste entre l'ombre et le fond de l'élément pour une bonne lisibilité.
En utilisant judicieusement la propriété text-shadow, vous pouvez donner du style et de la profondeur à votre texte, améliorant ainsi l'expérience visuelle des utilisateurs sur votre site web.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 4 | 10 | 3.5 | 4 | 9.6 |