Shadows
Varjostusominaisuuksia käytetään varjostusvaikutusten lisäämiseen elementin reunoille. Voit asettaa useita vaikutuksia erottamalla ne pilkuilla. Useimmissa tapauksissa varjoja käytetään merkkaamaan elementtejä, jotka ovat päällekkäin käyttäjäliittymässä.
Esimerkki
.element {
box-shadow: var(--dwc-shadow-xl);
}
Varjon väri
Ohjaat varjon väriä asettamalla --dwc-shadow-color -muuttujan. Oletusarvoisesti varjon väri on harmaa, johon on sekoitettu pääväri.
Muuttujat
| Muuttuja | Esimerkki |
|---|---|
--dwc-shadow-xs | |
--dwc-shadow-s | |
--dwc-shadow-m | |
--dwc-shadow-l | |
--dwc-shadow-xl | |
--dwc-shadow-2xl | |
--dwc-shadow |