Box Shadow
Tambah bayang kotak
Sintaks
visual="shadow:[value]"Nilai
| Nilai | CSS Output | Huraian |
|---|---|---|
none | box-shadow: var(--shadow-none) | Tiada bayang |
small | box-shadow: var(--shadow-small) | Bayang kecil |
medium | box-shadow: var(--shadow-medium) | Bayang sederhana |
big | box-shadow: var(--shadow-big) | Bayang besar |
giant | box-shadow: var(--shadow-giant) | Bayang gergasi |
Contoh
html
<div visual="shadow:medium">Card with shadow</div>Pratonton
Bayang Kotak
visual="shadow:medium" - Tambah ketinggian dengan bayang dari halus hingga dramatik
small
medium
big
Lihat Kod
html
<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:small">small</div>
<div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:medium">medium</div>
<div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:big">big</div>
</div>Nota
TIP
Sokongan Skala Tailwind
Gunakan awalan tw- untuk mengakses skala bayang Tailwind: shadow:tw-md, shadow:tw-lg, shadow:tw-xl