La syntaxe de la propriété CSS Box-Shadow
La propriété box-shadow permet d'ajouter une ou plusieurs ombres portées au cadre d'un élément HTML. Elle est structurée selon un ordre très précis :
- Décalage X (offset-x) : L'axe horizontal. Une valeur positive pousse l'ombre vers la droite, une valeur négative vers la gauche.
- Décalage Y (offset-y) : L'axe vertical. Une valeur positive pousse l'ombre vers le bas, une valeur négative vers le haut.
- Rayon de flou (blur-radius) : Plus la valeur est élevée, plus l'ombre sera diffuse, large et claire. S'il est à 0, l'ombre sera nette (solid).
- Étalement (spread-radius) : Une valeur positive agrandit la taille de l'ombre de tous les côtés, une valeur négative la rétrécit.
- Couleur : Généralement définie en RGBA pour gérer la transparence de l'ombre sur son arrière-plan.
- Inset : Mot-clé optionnel pour placer l'ombre à l'intérieur de l'élément (effet creusé).
Astuce d'UI Design : Comment faire une belle ombre ?
L'erreur classique des débutants est d'utiliser une ombre noire totalement opaque ou avec un flou très faible, ce qui donne un aspect "sale" ou daté au design. Pour une interface moderne (Material Design ou Apple-like) :
Utilisez toujours le format RGBA (couleur noire 0,0,0) avec une opacité très faible (entre 0.05 et 0.15), et compensez avec un grand rayon de flou (ex: 20px à 40px). L'ombre paraîtra naturelle, diffuse, comme projetée par une véritable source de lumière environnementale.