Penjana Penapis CSS
Cipta dan visualisasikan penapis imej CSS tersuai
Preview
CSS Code
Kawalan Penapis
Penapis Popular
Vintage
Neon Glow
Polaroid
Filem Vintaj
Seni Digital
Cara Menggunakan Penapis CSS
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:
1. Pilih Elemen
Pilih elemen HTML yang anda mahu gunakan penapis. Ini boleh menjadi imej, latar belakang atau mana-mana elemen lain.
2. Tambah Kelas atau ID
Jika elemen belum mempunyai kelas atau ID, tambahkan satu untuk menjadikannya lebih mudah untuk disasarkan dengan CSS.
3. Gunakan Penapis
Gunakan CSSfilterdalam helaian gaya atau gaya sebaris anda untuk menggunakan penapis yang dijana.
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. Gabungkan Berbilang Penapis
Anda boleh menggabungkan berbilang fungsi penapis dengan menyenaraikannya satu demi satu, dipisahkan oleh ruang.
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.
Related Tools
Penukar Sass kepada CSS
Ubah kod Sass anda kepada CSS. Pantas, mudah dan selamat.
Penjana Butang CSS Percuma
Erstellen Sie ansprechende, responsive Schaltflächen für Ihre Website. Wählen Sie aus über 70 vorgefertigten Stilen oder passen Sie Ihre eigenen mit unseren erweiterten Steuerelementen an.
Jana Transformasi CSS3 dengan Mudah
Alat yang berkuasa dan intuitif untuk mencipta transformasi CSS3 yang kompleks tanpa menulis kod. Visualisasikan perubahan dalam masa nyata dan salin CSS yang dijana untuk digunakan dalam projek anda.
Kalkulator Selang Keyakinan
Kira selang keyakinan untuk data sampel anda dengan ketepatan dan kemudahan.
Kalkulator Hash SHA-512
Jana cincang SHA-512 dengan cepat dan mudah
Penjana Bezier Kubik CSS
Buat fungsi pelonggaran Penjana Bezier Cubic CSS