Effets d'ombre CSS
- Page précédente Dégradé radial CSS
- Page suivante box-shadow CSS
Créez des effets d'ombre avec CSS !
Effets d'ombre CSS
En utilisant CSS, vous pouvez ajouter des ombres aux textes et aux éléments.
Dans notre tutoriel, vous apprendrez les propriétés suivantes :
text-shadowbox-shadow
Ombres de texte CSS
CSS text-shadow L'attribut ajoute une ombre au texte.
La manière la plus simple est de spécifier uniquement l'ombre horizontale (2px) et l'ombre verticale (2px) :
Effet d'ombre de texte !
Exemple
h1 {
text-shadow: 2px 2px;
}
Ensuite, ajoutez une couleur à l'ombre :
Effet d'ombre de texte !
Exemple
h1 {
text-shadow: 2px 2px red;
}
Ensuite, ajoutez un effet de flou à l'ombre :
Effet d'ombre de texte !
Exemple
h1 {
text-shadow: 2px 2px 5px red;
}
Les exemples suivants montrent du texte blanc avec une ombre noire :
Effet d'ombre de texte !
Exemple
h1 {
color: blanc;
text-shadow: 2px 2px 4px #000000;
}
Les exemples suivants montrent les ombres lumineuses néon rouges :
Effet d'ombre de texte !
Exemple
h1 {
text-shadow: 0 0 3px #FF0000;
}
Multiples ombres
Pour ajouter plusieurs ombres au texte, vous pouvez ajouter une liste d'ombres séparées par des virgules.
Les exemples suivants montrent les ombres lumineuses néon de rouge et de bleu :
Effet d'ombre de texte !
Exemple
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
L'exemple suivant montre un texte blanc avec des ombres noires, bleues et bleues foncées :
Effet d'ombre de texte !
Exemple
h1 {
color: blanc;
text-shadow: 1px 1px 2px noir, 0 0 25px bleu, 0 0 5px bleu foncé;
}
Vous pouvez également utiliser la propriété text-shadow pour créer une bordure pure autour du texte (sans ombre) :
Bordure autour du texte !
Exemple
h1 {
color: jaune;
text-shadow: -1px 0 noir, 0 1px noir, 1px 0 noir, 0 -1px noir;
}
- Page précédente Dégradé radial CSS
- Page suivante box-shadow CSS
