Shadows
Die Schatteneigenschaften werden verwendet, um Schatteneffekte um den Rahmen eines Elements hinzuzufügen. Sie können mehrere Effekte durch Kommas getrennt festlegen. In den meisten Fällen werden Schatten verwendet, um Elemente darzustellen, die in der Benutzeroberfläche übereinander liegen.
Beispiel
.element {
box-shadow: var(--dwc-shadow-xl);
}
Schattenfarbe
Sie steuern die Schattenfarbe, indem Sie die Variable --dwc-shadow-color festlegen. Standardmäßig ist die Schattenfarbe grau, getönt mit der Primärfarbe.
Variablen
| Variable | Beispiel |
|---|---|
--dwc-shadow-xs | |
--dwc-shadow-s | |
--dwc-shadow-m | |
--dwc-shadow-l | |
--dwc-shadow-xl | |
--dwc-shadow-2xl | |
--dwc-shadow |