Shadows
Les propriétés d'ombre sont utilisées pour ajouter des effets d'ombre autour du cadre d'un élément. Vous pouvez définir plusieurs effets séparés par des virgules. Dans la plupart des cas, les ombres sont utilisées pour signifier des éléments qui sont superposés dans l'interface utilisateur.
Exemple
.element {
box-shadow: var(--dwc-shadow-xl);
}
Couleur d'Ombre
Vous contrôlez la couleur de l'ombre en définissant la variable --dwc-shadow-color
. Par défaut, la couleur de l'ombre est grise teintée de la couleur primaire.
Variables
Variable | Exemple |
---|---|
--dwc-shadow-xs | |
--dwc-shadow-s | |
--dwc-shadow-m | |
--dwc-shadow-l | |
--dwc-shadow-xl | |
--dwc-shadow-2xl | |
--dwc-shadow |