Galerie CSS text-shadow
Démonstration visuelle et légendes de paramètres de code CSS
Règles de la propriété text-shadow
text-shadow: offset-x offset-y [blur-radius] [color];
offset-x(Obligatoire) : Décalage horizontal. Une valeur positive déplace l'ombre vers la droite, une valeur négative vers la gauche.offset-y(Obligatoire) : Décalage vertical. Une valeur positive déplace l'ombre vers le bas, une valeur négative vers le haut.blur-radius(Optionnel) : Rayon de flou. Plus la valeur est grande, plus l'ombre s'étale et devient floue. Valeur par défaut :0px(ombre nette).color(Optionnel) : Couleur de l'ombre. Si elle n'est pas spécifiée, la couleur du texte parent est généralement utilisée par le navigateur.- Ombres multiples : Il est possible de séparer plusieurs déclarations d'ombres par des virgules
,pour superposer des effets (ex. néon, relief 3D).
1. Ombre portée classique
décalage + flou
Profondeur
Paramètres CSS utilisés
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.35);
2. Effet Néon (Glow multicouche)
flous multiples
CYBER
Paramètres CSS utilisés
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #0ea5e9,
0 0 40px #0ea5e9,
0 0 80px #0ea5e9;
3. Effet 3D Rétro
empilement sans flou
RÉTRO
Paramètres CSS utilisés
text-shadow:
1px 1px 0 #ca8a04,
2px 2px 0 #ca8a04,
3px 3px 0 #ca8a04,
4px 4px 0 #ca8a04,
5px 5px 0 #ca8a04,
6px 6px 0 #a16207,
7px 7px 10px rgba(0,0,0,0.4);
4. Effet Gravé (Letterpress)
biseautage clair/sombre
Incrusté
Paramètres CSS utilisés
text-shadow:
1px 1px 1px rgba(255, 255, 255, 0.5),
-1px -1px 1px rgba(0, 0, 0, 0.4);
5. Contour net (Outline / Stroke)
4 angles à 1px
CONTOUR
Paramètres CSS utilisés
text-shadow:
-1px -1px 0 #f43f5e,
1px -1px 0 #f43f5e,
-1px 1px 0 #f43f5e,
1px 1px 0 #f43f5e;