Les cinq valeurs d'une ombre
Une ombre CSS se décrit par cinq paramètres, et comprendre à quoi sert chacun évite le tâtonnement.
Les deux décalages, horizontal et vertical, déplacent l'ombre par rapport à l'élément. Le flou détermine la douceur du bord : à zéro, l'ombre est un bloc net ; plus la valeur augmente, plus elle se diffuse. L'étalement agrandit ou rétrécit l'ombre avant l'application du flou. La couleur, enfin, est très généralement à utiliser avec de la transparence.
Le mot-clé d'ombre interne inverse l'effet : au lieu de projeter l'ombre à l'extérieur, il la place à l'intérieur du bloc, ce qui donne une impression de creux — utile pour un champ de formulaire enfoncé.
Ce qui rend une ombre crédible
La plupart des ombres ratées le sont pour la même raison : elles sont noires et opaques.
Dans la réalité, une ombre n'est pas noire. C'est une zone où la lumière arrive moins, teintée par ce qui l'entoure. Une ombre légèrement colorée dans la teinte du fond, avec une forte transparence, paraît immédiatement plus juste qu'un gris uniforme.
Deuxième principe : la lumière vient d'en haut. C'est la convention de toutes les interfaces, et l'œil la lit sans y penser. Un décalage vertical positif, avec un décalage horizontal nul ou très faible, correspond à cette attente. Une ombre décalée vers le haut paraît toujours étrange.
L'ombre comme hauteur
Une ombre n'est pas une décoration : elle indique à quelle distance de la page un élément se situe.
Plus un élément est haut, plus son ombre est large, floue et diffuse. Une carte posée à plat porte une ombre courte et resserrée ; une fenêtre modale qui flotte au-dessus de tout le reste porte une ombre ample et très diffuse.
D'où une règle simple et efficace : définissez trois ou quatre niveaux d'ombre pour tout votre projet, et réutilisez-les. Une interface où chaque élément a son ombre improvisée paraît désordonnée sans qu'on sache pourquoi.
Superposer plusieurs ombres
La propriété accepte plusieurs ombres séparées par des virgules, et c'est le secret des ombres vraiment réussies.
Le principe : une première ombre très courte et peu floue, qui ancre l'élément au sol, et une seconde beaucoup plus large et diffuse, qui simule la lumière ambiante. Cette combinaison est nettement plus réaliste qu'une ombre unique, quels que soient ses réglages.
Un mot sur la performance
Les ombres très floues sur de grandes surfaces coûtent cher à calculer, en particulier sur mobile. Multipliées sur une page longue, elles peuvent provoquer des saccades au défilement.
Évitez surtout d'animer directement une ombre au survol : le navigateur doit la recalculer à chaque image. Faites plutôt varier l'opacité d'un élément portant déjà l'ombre, une opération bien moins coûteuse.
Quand ne pas mettre d'ombre
L'ombre n'est pas le seul moyen de séparer deux zones. Une bordure fine, un fond légèrement différent ou simplement de l'espace font souvent mieux le travail, et plus sobrement.
Une page où tout porte une ombre n'a plus de hiérarchie : si tout flotte, plus rien ne ressort. Réservez les ombres marquées aux éléments qui doivent réellement se détacher.