Shadows
Les propriétés d'ombre ajoutent des effets d'ombre autour du cadre d'un élément. Les ombres signifient des éléments qui sont superposés les uns aux autres dans l'interface utilisateur.
Les ombres s'adaptent automatiquement aux modes clair et sombre, apparaissant plus fortes en mode sombre pour une meilleure visibilité.
Exemple
.element {
box-shadow: var(--dwc-shadow-xl);
}
Variables
| Variable | Description |
|---|---|
--dwc-shadow-xs | Ombre extra petite (1 couche) |
--dwc-shadow-s | Ombre petite (2 couches) |
--dwc-shadow-m | Ombre moyenne (3 couches, par défaut) |
--dwc-shadow-l | Ombre grande (4 couches) |
--dwc-shadow-xl | Ombre extra grande (5 couches) |
--dwc-shadow-2xl | Ombre double extra grande (6 couches) |
--dwc-shadow | var(--dwc-shadow-m) |