Filter Grayscale

Terapkan penapis skala kelabu

Sintaks

visual="grayscale:[value]"

Nilai

Nilai	CSS Output	Huraian
none	filter: grayscale(0%)	Tiada skala kelabu
partial	filter: grayscale(50%)	50% skala kelabu
full	filter: grayscale(100%)	Skala kelabu penuh

Contoh

<img visual="grayscale:full">Black and white</img>

Pratonton

Penapis Skala Kelabu

visual="grayscale:full" - Tukar ke skala kelabu

none

partial

full

Lihat Kod

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
  <div space="p:small" visual="bg:primary text:white rounded:small grayscale:partial">partial</div>
  <div space="p:small" visual="bg:primary text:white rounded:small grayscale:full">full</div>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

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