Le design d'interface moderne repose grandement sur la perception de la profondeur pour hiérarchiser les éléments visuels. La propriété CSS box-shadow est l'outil principal pour structurer cette troisième dimension sur le web. Le Générateur d'Ombres CSS permet de configurer visuellement ces ombres, d'en empiler plusieurs couches et de récupérer instantanément le code CSS valide pour vos feuilles de style.
Comprendre la propriété CSS box-shadow
La propriété box-shadow applique une ou plusieurs ombres à la boîte d'un élément HTML. Sa syntaxe de base accepte plusieurs valeurs de longueur, une couleur et un mot-clé optionnel pour la direction de projection.
Le comportement de l'ombre dépend de l'interaction entre ses différentes composantes physiques: les décalages directionnels, la dispersion du flou et la modification de la taille de la forme de base par l'expansion. Le Générateur d'Ombres CSS permet de manipuler chacun de ces paramètres à l'aide de curseurs précis pour observer leur impact en temps réel sur le rendu visuel.
Les paramètres de configuration d'une ombre
Pour façonner une ombre de boîte, le générateur met à disposition plusieurs contrôles individuels par couche:
- Décalage horizontal: Ce curseur déplace l'ombre vers la gauche ou vers la droite. Sa plage de valeurs s'étend de -50px à 50px. Une valeur positive déplace l'ombre vers la droite, tandis qu'une valeur négative la projette vers la gauche.
- Décalage vertical: Ce curseur déplace l'ombre vers le haut ou vers le bas, sur une plage de -50px à 50px. Une valeur positive projette l'ombre vers le bas, et une valeur négative la dirige vers le haut.
- Flou: Ce paramètre adoucit les contours de l'ombre. Réglable de 0px à 100px, une valeur de 0px produit une ombre aux contours parfaitement nets, tandis qu'une valeur élevée diffuse la couleur de l'ombre sur une plus grande surface, la rendant plus vaporeuse.
- Expansion: Ce curseur fait grandir ou rétrécir la forme de l'ombre avant que le flou ne soit appliqué. Sa plage varie de -50px à 50px. Une valeur positive élargit l'ombre dans toutes les directions. Une valeur d'expansion négative resserre l'ombre vers l'intérieur, ce qui permet de masquer l'ombre derrière l'élément ou de créer des effets très localisés.
- Couleur de l'ombre: Un sélecteur de couleur pour définir la teinte de la projection.
- Opacité: Un curseur pour ajuster le niveau de transparence de la couleur de l'ombre, permettant d'intégrer la projection de manière subtile sur le fond de la page.
- Ombre intérieure (inset): Une case à cocher qui modifie la direction de la projection. Lorsqu'elle est activée, l'ombre est projetée à l'intérieur du cadre de l'élément plutôt qu'à l'extérieur.
Superposition de couches et rendu réaliste
Dans la réalité, une source de lumière ne produit pas une ombre unique et uniforme. Pour obtenir un effet de relief réaliste et éviter un rendu plat, les concepteurs superposent souvent plusieurs couches d'ombres.
Le Générateur d'Ombres CSS pré-rend cinq couches pour vous aider à structurer votre design. La première couche possède des valeurs par défaut de 0 8 24 -4 (Décalage horizontal de 0px, Décalage vertical de 8px, Flou de 24px et Expansion de -4px) avec un noir transparent à 18 %. Les quatre autres couches sont initialement masquées.
Vous pouvez gérer ces couches grâce aux commandes suivantes:
- Ajouter une couche: Crée une nouvelle couche d'ombre configurée avec les valeurs par défaut pour enrichir l'effet.
- Supprimer la couche: Supprime la couche sélectionnée pour simplifier le style.
Lorsque plusieurs couches sont actives, le générateur combine leurs propriétés et produit une sortie CSS unique où chaque ombre est séparée par une virgule. L'ordre de déclaration dans le code respecte la superposition: la première ombre déclarée s'affiche au-dessus des suivantes.
Techniques de design: du relief au creux
Le réglage des curseurs permet de simuler différentes interactions physiques entre la lumière, l'élément et l'arrière-plan:
Créer une ombre fine et rapprochée
Pour donner l'impression qu'un élément est à peine surélevé par rapport au fond (comme un bouton secondaire ou une carte discrète), configurez des décalages verticaux et horizontaux faibles (entre 1px et 3px), un flou réduit (2px à 5px) et utilisez une expansion négative (par exemple -1px ou -2px). L'expansion négative resserre l'ombre sous l'élément, évitant qu'elle ne bave sur les côtés et créant une sensation de proximité immédiate avec le sol.
Créer une ombre douce et diffuse
Pour simuler un élément flottant haut au-dessus de l'interface (comme un menu déroulant ou une boîte de dialogue modale), augmentez le décalage vertical (par exemple 10px à 20px) et appliquez un flou très large (20px à 40px). Réduisez l'opacité de la couleur à un niveau très bas (entre 5 % et 10 %) pour que la transition avec l'arrière-plan reste douce et naturelle.
Obtenir un effet enfoncé (pressed in)
Pour donner l'illusion qu'un élément est creusé dans l'interface, comme un champ de saisie de formulaire ou un bouton sur lequel on vient de cliquer, activez l'option Ombre intérieure (inset). L'ombre se projette alors le long des bords internes de l'élément. En combinant cette option avec un léger décalage vertical positif, le haut de l'élément semblera projeter une ombre à l'intérieur de sa propre boîte, simulant parfaitement la profondeur d'une cavité.
Confidentialité et traitement des données
Le Générateur d'Ombres CSS fonctionne entièrement côté client. Chaque ombre est générée directement dans votre navigateur. Rien de ce que vous configurez ici n'est téléversé vers BroBroGo. Vos choix de couleurs, de dimensions et de structures de couches restent strictement locaux sur votre machine.
FAQ
Que contrôlent concrètement le décalage, le flou et l'expansion? Le décalage déplace l'ombre vers la gauche/droite et le haut/bas, le flou adoucit ses contours, et l'expansion l'agrandit ou la réduit avant l'application du flou. Une expansion négative resserre l'ombre vers l'intérieur, ce qui est idéal pour une ombre fine et rapprochée.
À quoi sert l'option d'ombre intérieure (inset)? Une ombre normale se projette à l'extérieur de l'élément, comme la lumière derrière une carte surélevée. L'option Inset la projette plutôt vers l'intérieur, donnant un effet enfoncé — très pratique pour des champs de saisie creusés ou des boutons enfoncés.
Pourquoi devrais-je superposer plusieurs couches d'ombre? Une seule ombre peut paraître plate au-delà d'une certaine taille. Un relief réaliste combine généralement une ombre rapprochée et sombre avec une ombre plus douce et diffuse — ajoutez une deuxième couche et ajustez-les de façon indépendante pour obtenir cet effet.