Comprendre la propriété CSS box-shadow
La propriété CSS box-shadow ajoute une ombre portée autour d'un élément. La syntaxe complète est : box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. Le décalage horizontal (offset-x) déplace l'ombre vers la droite (positif) ou la gauche (négatif). Le décalage vertical (offset-y) la déplace vers le bas (positif) ou le haut (négatif). Le rayon de flou (blur-radius) adoucit les bords de l'ombre. L'étendue (spread-radius) agrandit (positif) ou réduit (négatif) la taille de l'ombre. Le mot-clé inset crée une ombre intérieure au lieu d'extérieure.
Techniques avancées avec box-shadow
Box-shadow supporte plusieurs ombres séparées par des virgules, ce qui permet de créer des effets élaborés. Par exemple, combiner une ombre subtile proche (2px) avec une ombre diffuse lointaine (20px) crée un effet de profondeur réaliste. L'ombre avec spread négatif et blur élevé crée un effet de "glow" (lueur). Avec inset, on peut simuler des bordures intérieures, des effets de pression (bouton enfoncé) ou des dégradés subtils. Les ombres CSS sont accélérées par le GPU sur la plupart des navigateurs, ce qui les rend performantes même en animation.
Ombres CSS et design moderne
Les ombres sont un élément essentiel du design d'interface moderne. Le Material Design de Google utilise des ombres pour exprimer la hiérarchie et l'élévation des éléments. Le neumorphisme utilise des combinaisons d'ombres claires et sombres pour créer un effet de relief. Les bonnes pratiques recommandent des ombres subtiles et naturelles : utilisez une opacité faible (10-25%), un décalage vertical léger (les sources lumineuses sont généralement au-dessus), et un flou proportionnel à l'élévation souhaitée. Évitez les ombres trop marquées qui alourdissent le design.