7.1 Propriété text-shadow
La propriété text-shadow en CSS permet d'ajouter des ombres au texte, créant un effet de profondeur et améliorant la perception visuelle. Cette propriété offre de la flexibilité dans la configuration des ombres, y compris le contrôle du décalage, du flou et de la couleur de l'ombre.
La propriété text-shadow définit une ombre pour le texte à l'intérieur d'un élément. Elle permet de contrôler la position, le flou et la couleur de l'ombre, ajoutant un accent visuel aux éléments texte.
Syntaxe :
element {
text-shadow: offset-x offset-y blur-radius spread-radius color;
}
Paramètres :
offset-x: décalage de l'ombre horizontaloffset-y: décalage de l'ombre verticalblur-radius: rayon de flou de l'ombre (facultatif)color: couleur de l'ombre (facultatif)
Valeurs :
offset-xetoffset-y: spécifient le décalage de l'ombre par rapport au texte. Peuvent être des valeurs positives ou négativesblur-radius: détermine le degré de flou de l'ombre. Plus la valeur est grande, plus l'ombre sera floue. La valeur par défaut est 0 (sans flou)color: définit la couleur de l'ombre. Si la couleur n'est pas indiquée, la couleur du texte est utilisée
Exemple d'utilisation :
.shadow-basic {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.shadow-blur {
font-size: 24px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.shadow-color {
font-size: 24px;
text-shadow: 2px 2px 2px red;
}
.shadow-multiple {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 2px rgba(0, 0, 0, 0.3);
}
<body>
<p class="shadow-basic">Ombre de base</p>
<p class="shadow-blur">Ombre avec flou</p>
<p class="shadow-color">Ombre colorée</p>
<p class="shadow-multiple">Ombres multiples</p>
</body>
Explication du code :
.shadow-basic: applique une ombre simple avec un décalage2pxhorizontal et vertical, un rayon de flou2pxet une couleur noire semi-transparente.shadow-blur: ajoute un degré plus élevé de flou (5px), créant une ombre plus floue.shadow-color: applique une ombre colorée (rouge).shadow-multiple: applique deux ombres avec différents décalages et flous, créant un effet complexe en couches
7.2 Exemples
1. Ombre douce
Une ombre douce avec un grand rayon de flou :
.soft-shadow {
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<body>
<p class="soft-shadow">Ombre douce du texte</p>
</body>
Explication du code :
.soft-shadow: applique une ombre douce sans décalage et avec un grand rayon de flou (10px), créant un léger effet lumineux autour du texte
2. Ombre colorée
Ombre avec couleur vive et un peu floue :
.colorful-shadow {
font-size: 24px;
text-shadow: 3px 3px 5px blue;
}
<body>
<p class="colorful-shadow">Ombre colorée vive</p>
</body>
Explication du code :
.colorful-shadow: applique une ombre avec une couleur vive (bleu), un décalage3pxet un rayon de flou5px
3. Ombres multiples
Ombres multiples avec différents paramètres :
.multi-shadow {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
}
<body>
<p class="multi-shadow">Plusieurs ombres du texte</p>
</body>
Explication du code :
.multi-shadow: applique deux ombres avec différents paramètres : une avec un léger décalage et flou, et une autre avec un décalage plus important et un flou de couleur rouge
7.3 Points importants
Points importants lors de l'utilisation de text-shadow
Compatibilité des navigateurs
La propriété text-shadow est prise en charge par tous les navigateurs modernes, y compris Google Chrome, Firefox, Safari, Edge et Opera. Cependant, il est important de vérifier l'affichage des ombres dans les anciennes versions des navigateurs pour assurer une compatibilité multiplateforme.
Performance
L'utilisation d'ombres complexes avec de nombreux décalages et flous peut affecter les performances, surtout sur les appareils mobiles. Optimisez les ombres pour de meilleures performances et testez sur divers appareils.
Accessibilité
Assurez-vous que les ombres n'altèrent pas la lisibilité du texte. Le contraste entre le texte et le fond doit rester suffisant pour tous les utilisateurs, y compris les personnes malvoyantes.
La propriété text-shadow fournit de solides outils pour créer des ombres de texte en CSS. Elle permet d'ajouter divers effets, allant des ombres simples aux ombres complexes en plusieurs couches avec différentes couleurs et flous.
L'utilisation de text-shadow aide à améliorer la perception visuelle du texte, ajoutant profondeur et volume au design des pages Web. Il est important de se rappeler de la compatibilité des navigateurs et des performances lors de l'application d'ombres complexes, ainsi que de l'accessibilité pour tous les utilisateurs.
GO TO FULL VERSION