Générateur d'Ombres CSS

Anatomie de la propriété box-shadow

Une box-shadow unique est une liste de valeurs dans un ordre fixe : décalage horizontal, décalage vertical, rayon de flou, rayon d'étalement et couleur, avec un mot-clé inset facultatif. Seuls les deux décalages et la couleur sont obligatoires ; le flou et l'étalement valent zéro par défaut. Ainsi, l'abrégé qui se lit 0px 4px 12px rgba(0, 0, 0, 0.15) signifie aucun déplacement horizontal, quatre pixels vers le bas, douze pixels de flou, aucun étalement et un noir à 15 pour cent. Les curseurs de cet outil écrivent exactement cette chaîne pour vous, mais comprendre l'ordre rend l'édition à la main indolore.

Les décalages placent l'ombre par rapport à la boîte. Un décalage vertical positif déplace l'ombre vers le bas, ce qui est souhaitable pour l'illusion courante d'une source lumineuse située au-dessus de l'élément ; une valeur négative la fait remonter. Le décalage horizontal fonctionne de la même façon, de gauche à droite. Les décalages sont le plus grand indice qu'utilise votre cerveau pour juger de la hauteur à laquelle un élément flotte, alors privilégiez-les avant tout le reste.

Flou et étalement : les deux rayons que l'on confond

Le rayon de flou détermine la douceur du bord. À zéro, vous obtenez un duplicata de la boîte aux contours nets ; à mesure que le flou augmente, l'ombre se dissipe sur une bande plus large et ressemble davantage à de la vraie lumière diffuse. La plupart des ombres naturelles emploient un flou valant environ deux à trois fois le décalage vertical. Notez que le flou ne peut pas être négatif.

L'étalement est la valeur que presque personne ne règle, et elle est puissante. Un étalement positif gonfle l'ombre vers l'extérieur dans toutes les directions avant l'application du flou, la rendant plus grande que la boîte ; un étalement négatif la rétrécit. Un léger étalement négatif associé à un décalage vers le bas et à un flou généreux est la recette classique d'une ombre qui se love sous une carte au lieu de déborder sur les côtés. L'étalement est aussi la façon de tracer un anneau plein : aucun décalage, aucun flou, quelques pixels d'étalement positif et une couleur unie.

Les ombres inset pour les surfaces enfoncées et en creux

Ajouter le mot-clé inset dessine l'ombre à l'intérieur de l'élément plutôt que derrière lui, de sorte que la surface paraît creusée. C'est ainsi que vous donnez à un champ de texte l'aspect d'un puits, à un interrupteur un air enfoncé, ou à un panneau une apparence en creux dans la page. Les décalages pointent désormais vers le bord intérieur qui reçoit l'ombre, si bien qu'un décalage vers le bas assombrit le bord intérieur supérieur, imitant une lumière tombant d'en haut. Activez l'option Intérieure (inset) dans cet outil pour basculer entre une ombre externe et une ombre interne et regarder les mêmes nombres inverser leur signification.

Superposer plusieurs ombres

La propriété box-shadow accepte une liste séparée par des virgules, et le navigateur peint chaque ombre dans l'ordre, la première étant au-dessus. C'est l'astuce la plus utile pour une profondeur réaliste. Les objets réels ne projettent pas une seule ombre ; ils projettent une ombre de contact serrée et plus sombre juste sous le bord, et une ombre ambiante plus large et plus pâle, plus loin. Empiler une petite ombre à faible flou sur une grande ombre à fort flou reproduit cela, et le résultat paraît bien plus crédible que ce que peut offrir une ombre unique.

La superposition est aussi la façon dont les systèmes de design construisent des échelles d'élévation : l'élévation à la manière de Material correspond généralement à deux ou trois ombres empilées, accordées ensemble, et faire monter une carte d'un niveau remplace toute la pile plutôt que d'ajuster un seul nombre. Vous pouvez même mêler une ombre intérieure à des ombres extérieures dans la même déclaration pour obtenir à la fois un bord éclairé et une ombre portée.

Exemple concret : une ombre de carte tout en douceur

Voici une recette qui rend bien sur presque toute surface claire. Commencez par aucun décalage horizontal pour que l'ombre reste centrée, un décalage vertical d'environ 8px, un flou d'à peu près 24px et un étalement d'environ -6px afin qu'elle se glisse sous la carte. Utilisez une couleur quasi noire mais abaissez l'opacité à environ 12 pour cent, exprimée par rgba(0, 0, 0, 0.12). L'étalement négatif empêche le bord doux de déborder au-delà des coins, la faible opacité l'empêche de ressembler à une bavure, et le décalage modéré suggère une douce lumière venue d'en haut. Pour un résultat encore plus net, superposez une seconde ombre avec un décalage de 1px, un flou proche de zéro et un noir à environ 6 pour cent pour simuler une ligne de contact franche.

Erreurs courantes et comment les éviter

L'erreur la plus fréquente est une ombre totalement opaque, d'un noir pur, à fort flou, qui paraît terne et artificielle plutôt que lumineuse. Les arrière-plans colorés aggravent le problème : une ombre noire sur un bleu saturé paraît sale, alors teintez plutôt l'ombre vers la teinte de l'arrière-plan. Une autre erreur consiste à traiter l'étalement comme une seconde commande de flou ; il ne l'est pas, et le laisser à zéro tout en poussant le flou explique pourquoi certaines ombres semblent à la fois floues et trop petites.

On confond aussi box-shadow avec le filtre drop-shadow. box-shadow suit toujours la boîte rectangulaire de l'élément, y compris son border-radius, si bien qu'un PNG transparent à l'intérieur de la boîte reçoit tout de même une ombre rectangulaire. Le filtre drop-shadow épouse les pixels réellement non transparents, ce que vous voulez pour les formes irrégulières et les images détourées. Utilisez box-shadow pour les cartes, les boutons et les panneaux ; recourez au filtre lorsque la silhouette n'est pas un rectangle.

Performance et le piège des grands flous

Les ombres sont peintes par le navigateur, et les très grands rayons de flou coûtent réellement cher, surtout lorsqu'ils s'animent ou apparaissent sur de nombreux éléments à la fois. Animer le flou ou l'étalement d'une grande ombre peut provoquer des repeints à chaque image et des saccades sur les appareils moins puissants. Si vous avez besoin qu'une ombre grandisse au survol, une approche plus fluide consiste à pré-rendre la plus grande ombre sur un pseudo-élément et à animer plutôt son opacité, car l'opacité est peu coûteuse à composer. Gardez des valeurs de flou raisonnables, évitez d'avoir des centaines de nœuds ombrés à l'écran en même temps, et vos interfaces resteront fluides.