Rujukan Visual

Atribut visual mengawal warna, tekstur, tipografi, dan penampilan.

Latar Belakang

• Warna Latar Belakang - bg:white, bg:primary, bg:[#hex]
• Imej Latar Belakang - bg-image:[url]
• Lampiran Latar Belakang - bg-attachment:fixed, bg-attachment:scroll
• Klip Latar Belakang - bg-clip:border, bg-clip:text
• Asal Latar Belakang - bg-origin:border, bg-origin:padding
• Kedudukan Latar Belakang - bg-pos:center, bg-pos:top
• Ulangan Latar Belakang - bg-repeat, bg-no-repeat
• Saiz Latar Belakang - bg-size:cover, bg-size:contain
• Mod Campuran Latar Belakang - bg-blend:multiply, bg-blend:overlay

Tipografi

• Saiz Teks - text-size:small, text-size:big, text-size:giant
• Keluarga Fon - font:sans, font:serif, font:mono
• Berat Fon - font:normal, font:medium, font:bold
• Gaya Fon - italic, not-italic
• Smoothing Fon - antialiased, subpixel-antialiased
• Jarak Huruf - tracking:tight, tracking:wide
• Ketinggian Baris - leading:tight, leading:relaxed
• Line Clamp - line-clamp:1, line-clamp:2, line-clamp:3
• Kata Kunci Tipografi - prose, heading, body

Pemformatan Teks

• Warna Teks - text:dark, text:grey, text:primary
• Penjajaran Teks - text:left, text:center, text:right
• Transformasi Teks - uppercase, lowercase, capitalize
• Hiasan Teks - underline, line-through, no-underline
• Limpahan Teks - truncate, text-ellipsis
• Pembalutan Teks - text-wrap:wrap, text-wrap:nowrap, text-wrap:balance
• Whitespace - white-space:pre, white-space:nowrap
• Word Break - word-break:normal, break-words, break-all
• Hyphens - hyphens:auto, hyphens:none
• Inden Teks - indent:small, indent:medium
• Penjajaran Menegak - align:middle, align:top

Senarai

• Gaya Senarai - list-none, list-disc, list-decimal
• Varian Nombor Fon - tabular-nums, ordinal

Sempadan

• Warna Sempadan - border:grey, border:primary
• Lebar Sempadan - border-w:thin, border-w:thick
• Radius Sempadan - rounded:small, rounded:big, rounded:round
• Gaya Sempadan - border-solid, border-dashed, border-dotted

Kesan

• Bayang Kotak - shadow:small, shadow:medium, shadow:big
• Garis Luar - outline:none, outline:primary
• Bayang Teks - text-shadow:small, text-shadow:medium
• Kelegapan - opacity:[0.5], opacity:[0]
• Mod Campuran - mix-blend:multiply, mix-blend:overlay
• Topeng - mask-image:[url]

Penapis

• Kabur - blur:small, blur:medium
• Kecerahan - brightness:[0.5], brightness:[1.5]
• Kontras - contrast:[0.5], contrast:[1.5]
• Bayang Jatuh - drop-shadow:small, drop-shadow:medium
• Skala Kelabu - grayscale, grayscale:[0.5]
• Putar Hue - hue-rotate:[90deg]
• Songsang - invert, invert:[0.5]
• Ketepuan - saturate:[0.5], saturate:[2]
• Sepia - sepia, sepia:[0.5]

Penapis Latar Belakang

• Kabur Latar - backdrop-blur:small, backdrop-blur:medium
• Kecerahan Latar - backdrop-brightness:[0.5]
• Kontras Latar - backdrop-contrast:[0.5]
• Skala Kelabu Latar - backdrop-grayscale
• Putar Hue Latar - backdrop-hue-rotate:[90deg]
• Songsang Latar - backdrop-invert
• Kelegapan Latar - backdrop-opacity:[0.5]
• Ketepuan Latar - backdrop-saturate:[2]
• Sepia Latar - backdrop-sepia

Peralihan

• Sifat - transition:all, transition:colors
• Tempoh - duration:fast, duration:slow
• Fungsi Masa - ease:linear, ease:in-out
• Kelewatan - delay:short, delay:long

Animasi

• Terbina Dalam - animate:spin, animate:pulse, animate:bounce
• Tempoh - anim-duration:fast, anim-duration:slow
• Kelewatan - anim-delay:short, anim-delay:long
• Iterasi - anim-iteration:infinite, anim-iteration:2
• Arah - anim-direction:reverse, anim-direction:alternate
• Mod Isi - anim-fill:forwards, anim-fill:backwards
• Status Main - anim-play:paused, anim-play:running

Transform

• Skala - scale:[1.1], scale-x:[0.5]
• Putar - rotate:[45deg], rotate:[90deg]
• Terjemah - translate-x:[10px], translate-y:[20px]
• Senget - skew-x:[5deg], skew-y:[10deg]
• Asal - origin:center, origin:top-left

Transform 3D

• Perspektif - perspective:[500px]
• Asal Perspektif - perspective-origin:center
• Gaya Transform - transform-style:preserve-3d
• Keterlihatan Belakang - backface:hidden, backface:visible

Interaktiviti

• Warna Aksen - accent:primary, accent:secondary
• Penampilan - appearance:none
• Warna Karet - caret:primary, caret:transparent
• Skema Warna - color-scheme:light, color-scheme:dark
• Kursor - cursor:pointer, cursor:wait, cursor:grab
• Saiz Medan - field-sizing:content
• Peristiwa Penunjuk - pointer-events:none, pointer-events:auto
• Saiz Semula - resize, resize:none, resize-x, resize-y
• Kelakuan Skrol - scroll:smooth, scroll:auto
• Margin Skrol - scroll-m:small, scroll-m:medium
• Padding Skrol - scroll-p:small, scroll-p:medium
• Penjajaran Snap - snap:start, snap:center
• Hentian Snap - snap-stop:normal, snap-stop:always
• Jenis Snap - snap:x, snap:y, snap:mandatory
• Tindakan Sentuh - touch:none, touch:pan-x
• Pilihan Pengguna - select:none, select:all
• Will Change - will-change:transform, will-change:opacity
• Prefiks Keadaan - hover:, focus:, active:, disabled:

SVG

• Isi - fill:current, fill:none
• Garis - stroke:current, stroke:primary
• Lebar Garis - stroke-w:1, stroke-w:2

Kebolehcapaian

• Penyesuaian Warna Paksa - forced-color-adjust:none, forced-color-adjust:auto

Contoh Pantas

<div visual="bg:white rounded:big shadow:medium text:dark">
  Kad dengan pelbagai sifat visual
</div>