Pendant des années, mes ombres avaient l'air fausses et je ne pouvais pas comprendre pourquoi. J'écrirais box-shadow: 0 5px 10px black« , prenez un halo gris boueux, atténuez-le et continuez à vous sentir vaguement insatisfait. La carte avait l'air d'avoir un bleu, pas une ombre. Ce n'est que lorsque j'ai commencé à démonter les systèmes de conception que j'admirais - ceux où les cartes semblent véritablement flotter - que j'ai réalisé l'astuce. Ils n'utilisent jamais une ombre. Ils en empilent deux ou trois, chacun faisant un travail différent, et le résultat se lit comme une lumière se comportant de la même manière que la lumière se comporte réellement.
Je construis des interfaces dans React et Tailwind pour gagner ma vie, je maintiens un thème d'administration WordPress dans WP Adminify où les ombres portent une grande partie de la hiérarchie visuelle, et j'ai construit le Générateur d'ombres de boîte CSS sur Toolz.dev parce que j'en avais assez de régler manuellement les ombres multicouches dans un éditeur de texte et de recharger pour voir le résultat Ce guide est tout ce que j'ai appris sur le box-shadow propriété : ce que fait chaque valeur, pourquoi la superposition fonctionne, comment éviter les pièges courants et comment utiliser le générateur pour passer d'un élément vierge au CSS de production en quelques minutes.
tl;dr : UN CSS
box-shadowprend un décalage X, un décalage Y, un rayon de flou, un rayon d'étalement et une couleur, avec un facultatifinsetmot-clé. Le flou adoucit le bord ; le spread grandit ou rétrécit l'ombre avant de s'estomper. La véritable élévation vient de l'empilement de plusieurs ombres séparées par des virgules, et non de l'opacité d'une ombre et d'une 39 ; Utilisez du noir à faible opacité, un petit décalage en Y, un flou généreux et un spread légèrement négatif - puis copiez le CSS directement depuis le générateur.
Que fait réellement la propriété box-shadow ?
box-shadow peint une ou plusieurs ombres autour d'un élément' ; s border box, et la propriété est spécifiée dans Contexte et frontières du CSS Niveau 3. La syntaxe d'une seule ombre ressemble à ceci :
box-shadow: <inset?> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
Les décalages sont obligatoires ; le flou, la propagation et la couleur sont facultatifs mais vous les définirez presque toujours. Voici ce que chacun contrôle, de la manière dont j'y pense lors du réglage :
Décalage X déplace l'ombre horizontalement Les valeurs positives la poussent à droite, négative à gauche Pour la plupart des ombres d'interface, vous voulez cela à zéro ou près de zéro, car la lumière dans le monde réel vient généralement d'en haut, projetant les ombres vers le bas plutôt que sur le côté.
Décalage Y déplace l'ombre verticalement Les valeurs positives le poussent vers le bas, ce que vous voulez pour un élément qui semble se trouver au-dessus de la page C'est la valeur unique qui contrôle le plus comment " ; high" ; l'élément se sent.
Rayon flou adoucit l'ombre' ; s bord Une valeur de zéro donne une ombre aux bords durs comme une forme solide ; des valeurs plus grandes étalent la douceur Cela ne peut pas être négatif Presque chaque ombre d'apparence naturelle utilise un flou plusieurs fois plus grand que son décalage en Y.
Rayon d'étalement change la taille de l'ombre avant que le flou ne soit appliqué La propagation positive rend l'ombre plus grande dans toutes les directions ; la propagation négative la réduit La propagation négative est l'arme secrète pour les ombres de cartes serrées et crédibles, car elle attire l'ombre de sorte qu'elle ne saigne pas au-delà de l'élément.
Couleur est toute couleur CSS valide Les meilleures ombres d'interface utilisent le noir ou le presque noir à faible opacité - quelque chose comme rgba(0, 0, 0, 0.1) - plutôt qu'un gris entièrement opaque, car un noir translucide teinte tout ce qui se trouve derrière lui comme le fait une véritable ombre.
Pourquoi les bonnes ombres utilisent-elles plus d'une couche ?
C'est l'idée qui a changé mes ombres complètement, donc elle obtient sa propre section Une seule ombre est une seule goutte uniforme Les vraies ombres ne sont pas uniformes Près de l'objet l'ombre est plus sombre et plus nette ; plus loin elle est plus claire et plus diffuse Vous vous rapprochez de cette chute en empilant des ombres.
Une recette classique est composée de deux couches : une ombre serrée légèrement plus foncée qui se trouve près de l'élément et lui donne une base croustillante, plus une ombre plus douce, plus large et plus claire en dessous qui assure la diffusion ambiante Quelque chose comme :
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
Le navigateur peint des ombres séparées par des virgules dans l'ordre, avec la première sur le dessus Chaque couche est bon marché, et deux ou trois ensemble lus comme une véritable profondeur d'une manière qu'aucune ombre ne peut, peu importe la façon dont vous l'accordez C'est exactement pourquoi le générateur est construit autour de couches plutôt que d'un seul ensemble de curseurs - le Générateur d'ombres de boîte CSS expédié avec des préréglages comme Card, Elevated et Floating qui sont tous multicouches, vous partez donc d'une base réaliste au lieu d'une goutte solitaire.
Le modèle mental que j'utilise : pensez aux niveaux d'élévation Une carte de repos se trouve bas avec une petite ombre serrée Une chute ou popover se trouve plus haut avec une plus grande, plus douce Une modale se trouve la plus haute de toutes Augmenter l'élévation signifie augmenter le décalage en Y et le flou sur toutes les couches ensemble, pas seulement assombrir une ombre.
Comment créer une ombre intérieure ?
le inset keyword retourne une ombre à l'intérieur de la boîte de remplissage element' ; s au lieu de la projeter vers l'extérieur Ajouter inset au recto d'une déclaration d'ombre et il peint à l'intérieur de l'élément :
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
Les ombres intérieures sont la façon dont vous donnez à un contrôle un aspect enfoncé, encastré ou gravé. Une entrée de texte se lit souvent mieux avec une ombre encastrée subtile qui suggère un puits dans lequel le texte se trouve. Un état de bouton enfoncé peut échanger son ombre extérieure contre une ombre intérieure pour se sentir physiquement déprimée. Et toute la tendance du neumorphisme est construite en associant une lumière incrustée d'une direction avec une incrustation sombre de l'autre. Dans le générateur, l'encart est un seul bascule par couche, vous pouvez donc mélanger les ombres encastrées et initiales dans le même élément - ce qui est exactement ce dont les surfaces neumorphes ont besoin.
Comment utiliser le générateur d'ombres de boîte ?
Le flux est conçu pour correspondre à la façon dont je travaille réellement Ouvrez le Générateur d'ombres de boîte CSS et vous atterrissez sur un élément d'aperçu avec un préréglage de carte réaliste déjà appliqué, vous ne regardez donc jamais un canevas vierge.
Choisissez un préréglage pour vous rapprocher de ce que vous voulez - Subtil, Carte, Élevé, Flottant, Intérieur, Lueur, Neumorphe ou Sharp Chacun charge sa pile de couches complète Ensuite, sélectionnez un calque et réglez-le avec les curseurs : offset X, offset Y, flou et spread ont chacun leur propre contrôle, plus un sélecteur de couleurs, un curseur d'opacité et le basculement de l'aperçu. Les mises à jour en direct pendant que vous faites glisser, vous façonnez donc directement l'ombre plutôt que d'éditer des chiffres et d'imaginer le résultat.
Si vous avez besoin de plus de profondeur, ajoutez un calque Si un calque ne fait rien d'utile, retirez-le Il y a une bascule d'arrière-plan qui fait basculer l'aperçu entre la lumière et l'obscurité, ce qui compte car une ombre qui semble parfaite sur une carte lumineuse peut disparaître ou se transformer en un vilain anneau gris sur un sombre Vérifier les deux avant d'expédier enregistre un aller-retour.
Quand vous êtes heureux, copiez le CSS Vous pouvez saisir la plaine box-shadow déclaration, ou un bloc qui inclut également le -webkit-box-shadow préfixe si vous devez prendre en charge les très anciennes builds WebKit Collez-le dans votre feuille de style, votre composant stylisé ou votre valeur arbitraire Tailwind et vous avez terminé.
Comme chaque outil du site, il s'exécute entièrement dans votre navigateur Rien n'est téléchargé et il continue de fonctionner hors ligne une fois chargé, ce qui est la même approche côté client que je décris dans le Guide de confidentialité des données.
Cas d'utilisation réels
Construire une échelle d'élévation pour un système de conception
Lorsque je configure un nouveau projet, je définis un ensemble fixe de niveaux d'élévation plutôt que de laisser chaque composant inventer sa propre ombre Habituellement cela fait quatre ou cinq étapes à partir de " ; resting card" ; jusqu'à " ; modal." ; je construis chacun dans le générateur, copie le CSS, et les dépose dans mes jetons de conception comme valeurs nommées Chaque carte, menu, et dialogue fait alors référence à un niveau, donc l'ensemble du produit partage un modèle d'éclairage cohérent Faire cela à la main dans un éditeur de texte est misérable ; le faire avec un aperçu en direct prend quelques minutes.
Faire flotter une carte
L'instinct par défaut est une seule ombre sombre, qui semble collée. Le correctif est la recette à deux couches : une couche serrée avec un petit décalage en Y et un étalement négatif pour ancrer la carte, et une couche plus large et plus douce en dessous pour la lumière ambiante. Partez de la carte ou du préréglage élevé, poussez les valeurs au goût et vous obtenez une carte qui se lit comme levée plutôt que comme décrite.
Concevoir des états pressés et ciblés
La rétroaction interactive vit souvent dans l'ombre Un bouton peut perdre la majeure partie de son ombre extérieure et obtenir un petit encart sur la presse pour se sentir physiquement poussé Une entrée peut porter un encart subtil permanent pour ressembler à un puits Ceux-ci sont rapides à prototyper en basculant l'encart et en regardant l'aperçu, et ils ajoutent beaucoup de polissage perçu pour très peu de code.
Surfaces neumorphes
Si vous optez pour le look soft-UI, vous avez besoin de deux ombres sur le même élément pointant dans des directions opposées - une sombre en bas à droite et une claire en haut à gauche - pour que la surface apparaisse extrudée de l'arrière-plan Le préréglage neumorphe met cela en place, et vous ajustez la couleur, l'opacité et le flou pour correspondre à votre arrière-plan spécifique Il ne fonctionne que sur des arrière-plans qui ne sont ni blanc pur ni noir pur, ce que le basculant sombre-arrière vous aide à vérifier.
box-shadow versus filtre : drop-shadow
Une question que je reçois souvent : quand dois-je utiliser filter: drop-shadow() au lieu de box-shadow? ils se ressemblent mais se comportent différemment, et choisir de mauvais causes de vrais bugs.
| figure | ombre-boîte | filtre : drop-shadow() |
|---|---|---|
| Suit | La boîte de bordure rectangulaire | Les pixels visibles (non transparents) réels |
| le mieux pour | Cartes, boutons, panneaux, entrées | Logos, icônes, PNG avec transparence, formes irrégulières |
| Supporte l'encart | oui | non |
| Supports répandus | oui | non |
| Ombres multiples | Oui, séparés par des virgules | Oui, en enchaînant les filtres |
| Affecte la disposition | non | non |
La version courte : pour un élément rectangulaire normal, utiliser box-shadow - il est plus capable, il supporte l'étalement et l'encart, et c'est ce que produit ce générateur. Atteindre drop-shadow() seulement lorsque vous avez besoin de l'ombre pour tracer une forme transparente ou irrégulière, comme un logo ou une icône découpée, où une ombre rectangulaire aurait l'air fausse.
Pointes et pièges avancés
Quelques choses par lesquelles j'ai été brûlé D'abord, les ombres se font couper overflow: hidden sur un ancêtre Si votre belle ombre est mystérieusement coupée, un ancêtre la coupe - soit donnez la place de l'ombre, soit déplacez-la overflow gouverner ailleurs. Parce que box-shadow n'affecte jamais la disposition, elle ne pousse pas les éléments voisins, ce qui est une caractéristique, mais cela signifie également qu'une ombre peut s'étendre silencieusement sous un frère ou une sœur.
Deuxièmement, d'énormes flous sur de nombreux éléments peuvent coûter des performances de peinture, en particulier lorsqu'ils sont animés. Si vous animez une ombre sur le parchemin ou survolez une longue liste, surveillez votre fréquence d'images ; parfois, il est moins cher d'animer une opacité sur un pseudo-élément qui contient une ombre statique. Une fois votre CSS finalisé, en le faisant passer à travers le CSS Minifier rase les octets supplémentaires ajoutés par les ombres multicouches verbeuses.
Troisièmement, n'oubliez pas que la couleur de l'ombre peut être plus que noire Une ombre très subtilement teintée - une version sombre de votre teinte de surface' ; s plutôt que du noir pur - semble souvent plus riche que le gris neutre, car les ombres réelles prennent la couleur ambiante C'est un petit mouvement avec un gain disproportionné.
Si vous assemblez une boîte à outils CSS plus large, le Guide d'outils pour les développeurs Web couvre où le travail fantôme s'intègre parmi les autres utilitaires basés sur un navigateur, et une fois vos ombres terminées, le Générateur de gradient et cueillette de couleurs complétez le style de surface. Si l'accessibilité est dans votre esprit, associez-la au Vérificateur de contraste de couleurs ainsi, le contenu posé sur vos cartes ombragées reste lisible.
FAQ
Quelle est la propriété CSS Box-Shadow ?
box-shadow ajoute une ou plusieurs ombres autour d'un élément' ; s frame Chaque ombre prend un décalage horizontal, un décalage vertical, un rayon de flou facultatif, un rayon d'étalement facultatif, et une couleur, avec un mot clé en insert facultatif pour dessiner l'ombre à l'intérieur de la boîte Plusieurs ombres sont séparées par des virgules et peintes avec la première sur le dessus.
Quelle est la différence entre le flou et la propagation ?
Le rayon de flou adoucit le bord de l'ombre, donc une valeur plus grande le rend plus diffus Le rayon d'étalement modifie la taille de l'ombre et du n°39 ; avant de se brouiller : un étalement positif le fait croître dans toutes les directions, tandis qu'un étalement négatif le rétrécit, c'est ainsi que vous gardez une ombre bien repliée sous une carte au lieu de saigner au-delà de ses bords.
Comment créer une ombre intérieure dans CSS ?
Ajouter le mot-clé en médaillon à l'ombre. en médaillon dessine l'ombre à l'intérieur de la boîte de remplissage element' ; s au lieu de l'extérieur, ce qui est utile pour les boutons enfoncés, les puits d'entrée et les surfaces neumorphes. Basculer le commutateur en médaillon dans le générateur l'ajoute automatiquement à la couche sélectionnée.
Puis-je utiliser plusieurs ombres-boîtes sur un seul élément ?
Oui. Vous pouvez répertorier plusieurs ombres dans une seule déclaration d'ombre de boîte séparée par des virgules, et le navigateur les peint dans l'ordre avec la première sur le dessus. La superposition d'une ombre douce et large sous une ombre plus petite et plus sombre est le moyen standard de rendre l'élévation réaliste plutôt que collée dessus.
Pourquoi mon shadow box est-il coupé ?
Une ombre est coupée lorsqu'un ancêtre a un débordement : caché ou lorsque l'élément se trouve au bord d'un conteneur de clipsage Donnez la salle d'ombre, ou déplacez le débordement : règle cachée vers un élément différent Parce que le box-shadow n'affecte pas la disposition, il ne pousse jamais les éléments voisins, donc il peut aussi s'étendre silencieusement sous un frère ou une sœur.
Quelle est la différence entre Box-Shadow et Filter : Drop-shadow ?
box-shadow suit la boîte de bordure rectangulaire element' ; s, il ignore donc les zones transparentes à l'intérieur d'un PNG ou d'une forme irrégulière. filtre : drop-shadow () trace les pixels visibles réels, ce qui convient aux logos et icônes avec transparence Pour les cartes et boutons rectangulaires standard, box-shadow est le bon choix et prend en charge spread et inset que drop-shadow ne le fait pas.
Ai-je encore besoin du préfixe -webkit- pour Box-Shadow ?
Pour les navigateurs modernes, non. box-shadow n'est pas préfixé et largement pris en charge depuis de nombreuses années. Le bloc préfixé que le générateur peut produire n'est utile que si vous devez prendre en charge les très anciennes versions de WebKit, et pour la plupart des projets, la propriété standard box-shadow suffit à elle seule.
Ce générateur d'ombres-boîtes envoie-t-il mes données n'importe où ?
non . La sortie d'aperçu et de CSS est entièrement générée dans votre navigateur avec JavaScript. Aucune valeur n'est téléchargée ou stockée, et l'outil continue de fonctionner sans connexion réseau une fois la page chargée.
