Qu'est-ce que l'effet Shadow en CSS ?
En CSS, le terme Shadow fait référence aux ombres que l'on peut appliquer aux éléments d’une page web, que ce soit aux boîtes (div, sections, images) ou au texte. Ces ombres apportent un relief visuel qui peut produire une impression de profondeur ou de luminosité. On distingue principalement deux types d’ombres via CSS : box-shadow (ombre portée sur les boîtes) et text-shadow (ombre portée sur les textes).
L’effet shadow est une technique graphique simple mais puissante pour renforcer la lisibilité, l’esthétique et la hiérarchie visuelle des contenus, sans faire appel à des images externes ou à des scripts.
La propriété box-shadow : ombrage des boîtes
La propriété CSS box-shadow permet d’ajouter une ou plusieurs ombres portées autour d’un élément HTML. Elle s’utilise ainsi :
- offsetX : Décalage horizontal de l’ombre (positif vers la droite, négatif vers la gauche)
- offsetY : Décalage vertical de l’ombre (positif vers le bas, négatif vers le haut)
- blurRadius : Rayon de flou de l’ombre (plus la valeur est grande, plus l’ombre est floue)
- spreadRadius : Étendue de l’ombre (positive pour l’agrandir, négative pour la réduire)
- color : Couleur de l’ombre (peut inclure la transparence via rgba par exemple)
- inset : Mot-clé optionnel qui fait passer l’ombre de portée extérieure à une ombre interne
Exemple simple :
Cette déclaration crée une ombre portée décalée vers la droite et le bas, légèrement floue et semi-transparente.
La propriété text-shadow : ombrage des textes
Pour appliquer des ombres aux textes, la propriété CSS text-shadow est utilisée. Sa syntaxe est proche de celle de box-shadow, mais fonctionne spécifiquement avec le texte :
Par exemple :
Cela produit une ombre portée décalée qui facilite la lecture et ajoute une notion de profondeur au texte.
Utilisations pratiques des shadows en CSS
Les ombres en CSS sont utilisées dans diverses situations pour :
- Mettre en avant un bouton ou un élément cliquable
- Créer des effets de carte ou de panneau en relief
- Donner du volume aux images ou blocs sans utiliser d’images complexes
- Améliorer la lisibilité du texte sur des fonds clairs ou colorés
- Simuler des lumières ou des effets d’intensité (ombres portées, ombres internes)
- Ces ombres restent légères en termes de performances, contrairement à certaines images ou effets Javascript.
Compatibilité et bonnes pratiques
Toutes les propriétés d’ombre (box-shadow et text-shadow) sont supportées par l’ensemble des navigateurs récents (Chrome, Firefox, Edge, Safari). Quelques spécificités historiques n’existent plus dans les versions actuelles.
Quelques conseils :
- Éviter de multiplier les ombres très lourdes pour préserver la performance
- Jouer avec la transparence pour des effets plus subtils
- Utiliser le mot-clé
insetpour un effet d’ombre interne réaliste - Tester l’accessibilité, notamment avec des contrastes suffisants pour les textes ombrés
Exemple visuel simple
Ces styles apportent un effet d’élévation qui favorise la perception de structure et de profondeur dans l’interface utilisateur.
En résumé, le shadow en CSS est une technique incontournable pour enrichir visuellement les interfaces web avec des effets d’ombre simples et efficaces, améliorant à la fois le design et l’expérience utilisateur.
