Apakah Penapis CSS?

Penapis CSS membolehkan anda menggunakan kesan grafik seperti kabur atau peralihan warna pada elemen. Ia biasanya digunakan untuk imej, latar belakang dan sempadan.

Penapis boleh digunakan untuk mencipta kesan visual, meningkatkan imej atau mencipta elemen reka bentuk unik tanpa memerlukan alat penyuntingan imej luaran.

Sifat Penapis CSS yang Disokong

• blur()- Menggunakan kabur Gaussian pada elemen.
• brightness()- Melaraskan kecerahan elemen.
• contrast()- Melaraskan kontras elemen.
• grayscale()- Menukar elemen kepada skala kelabu.
• hue-rotate()- Menggunakan putaran rona pada elemen.
• invert()- Membalikkan warna elemen.
• opacity()- Melaraskan kelegapan elemen.
• saturate()- Tepu atau menyatepu unsur.
• sepia()- Menukar elemen kepada sepia.

Cara Menggunakan Penapis

Menggunakan kod CSS yang dijana oleh alat ini, anda boleh menggunakan penapis pada mana-mana elemen HTML. Begini caranya:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

Keserasian Penyemak Imbas

Penapis CSS disokong secara meluas dalam penyemak imbas moden, termasuk Chrome, Firefox, Safari, Edge dan Opera. Walau bagaimanapun, penyemak imbas lama seperti Internet Explorer tidak menyokongnya.