Effets d’ombre CSS
Avec CSS, vous pouvez créer des effets d’ombre !
Survolez-moi !
Effets d’ombre CSS
Avec CSS, vous pouvez ajouter une ombre au texte et aux éléments.
Dans ces chapitres, vous découvrirez les propriétés suivantes :
Ombre de texte CSS
Le CSS text-shadow La propriété applique une ombre au texte.
Dans son utilisation la plus simple, vous ne spécifiez que l’ombre horizontale (2px) et l’ombre verticale (2px) :
Effet d’ombre de texte !
Ensuite, ajoutez une couleur à l’ombre :
Effet d’ombre de texte !
Ensuite, ajoutez un effet de flou à l’ombre :
Effet d’ombre de texte !
L’exemple suivant montre un texte blanc avec une ombre noire :
Effet d’ombre de texte !
L’exemple suivant montre une ombre fluo rouge :
Effet d’ombre de texte !
Ombres multiples
Pour ajouter plusieurs ombres au texte, vous pouvez ajouter une liste d’ombres séparées par des virgules.
L’exemple suivant montre une ombre lumineuse néon rouge et bleue :
Effet d’ombre de texte !
L’exemple suivant montre un texte blanc avec une ombre noire, bleue et bleu foncé :
Effet d’ombre de texte !
Exemple
h1 {
Couleur blanche;
texte-ombre : 1px 1px 2px noir, 0 0 25px bleu, 0 0 5px bleu foncé ;
}
Essayez-le vous-même »
Vous pouvez également utiliser la propriété text-shadow pour créer une bordure simple autour du texte (sans ombres) :
Bordure autour du texte !
Exemple
h1 {
couleur : corail ;
texte-ombre : -1px 0 noir, 0 1px noir, 1px 0 noir, 0 -1px noir ;
}
Essayez-le vous-même »
#Effets #dombre #CSS