Mask

Terapkan topeng pada elemen

Sintaks

visual="mask:[value]"

Nilai

Nilai	CSS Output	Huraian
none	mask-image: none	Tiada topeng
fade-y	mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent)	Pudar menegak
fade-x	mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent)	Pudar mendatar

Contoh

<div visual="mask:fade-y">Faded edges</div>

Pratonton

Topeng

visual="mask:fade-y" - Terapkan topeng kecerunan pada tepi

none

fade-y

fade-x

Lihat Kod

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:medium" visual="bg:primary text:white rounded:small mask:none">none</div>
  <div space="p:medium" visual="bg:primary text:white rounded:small mask:fade-y">fade-y</div>
  <div space="p:medium" visual="bg:primary text:white rounded:small mask:fade-x">fade-x</div>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

<div visual="mask:[custom-value]">Custom</div>