Filter CSS adalah alat yang ampuh yang dapat digunakan penulis untuk mencapai berbagai efek visual (seperti filter Photoshop untuk browser). filterProperti CSS menyediakan akses ke efek seperti blur atau perubahan warna pada rendering elemen sebelum elemen ditampilkan. Filter biasanya digunakan untuk menyesuaikan rendering gambar, latar belakang, atau bingkai.
Sintaksnya adalah:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Ada sejumlah fungsi yang digunakan untuk nilai:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- untuk menerapkan filter SVGcustom()- "segera akan datang"
Beberapa fungsi dapat digunakan, dipisahkan spasi.
.do-more-things ( filter: blur(20px) grayscale(20%); )Fungsi Filter
Untuk menggunakan properti filter CSS, Anda menentukan nilai untuk salah satu fungsi berikut yang tercantum di atas. Jika nilainya tidak valid, fungsi tersebut mengembalikan "tidak ada". Kecuali jika disebutkan, fungsi yang mengambil nilai yang dinyatakan dengan tanda persen (seperti pada 34%) juga menerima nilai yang dinyatakan sebagai desimal (seperti dalam 0,34).
Berikut adalah demo yang memungkinkan Anda sedikit bermain dengan filter individual:
grayscale ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Mengubah gambar masukan menjadi skala abu-abu. Nilai "jumlah" menentukan proporsi konversi. Nilai 100% sepenuhnya abu-abu. Nilai 0% membiarkan input tidak berubah. Nilai antara 0% dan 100% adalah pengali linier pada efeknya. Jika parameter "jumlah" tidak ada, nilai 100% digunakan. Nilai negatif tidak diperbolehkan.
warna coklat tua()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Mengubah gambar masukan menjadi sepia. Nilai "jumlah" menentukan proporsi konversi. Nilai 100% sepenuhnya sepia. Nilai 0 membiarkan input tidak berubah. Nilai antara 0% dan 100% adalah pengali linier pada efeknya. Jika parameter "jumlah" tidak ada, nilai 100% digunakan. Nilai negatif tidak diperbolehkan.
jenuh()
filter: saturate(2); /* same as… */ filter: sature(200%);Menjenuhkan gambar input. Nilai "jumlah" menentukan proporsi konversi. Nilai 0% sama sekali tidak jenuh. Nilai 100% membiarkan input tidak berubah. Nilai lainnya adalah pengganda linier pada efeknya. Nilai di atas 100% diperbolehkan, memberikan hasil yang sangat jenuh. Jika parameter "jumlah" tidak ada, nilai 100% digunakan. Nilai negatif tidak diperbolehkan.
hue-rotate ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Menerapkan rotasi warna pada gambar masukan. Nilai "sudut" menentukan jumlah derajat di sekitar lingkaran warna sampel masukan akan disesuaikan. Nilai 0deg membiarkan input tidak berubah. Jika parameter "sudut" tidak ada, nilai dari 0degdigunakan. Nilai maksimumnya adalah 360deg.
membalikkan()
filter: invert(100%);Membalik sampel pada gambar input. Nilai "jumlah" menentukan proporsi konversi. Nilai 100% benar-benar terbalik. Nilai 0% membiarkan input tidak berubah. Nilai antara 0% dan 100% adalah pengali linier pada efeknya. Jika parameter "jumlah" tidak ada, nilai 100% digunakan. Nilai negatif tidak diperbolehkan.
kegelapan()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Menerapkan transparansi pada sampel di gambar input. Nilai "jumlah" menentukan proporsi konversi. Nilai 0% benar-benar transparan. Nilai 100% membiarkan input tidak berubah. Nilai antara 0% dan 100% adalah pengali linier pada efeknya. Ini sama dengan mengalikan sampel gambar masukan dengan jumlah. Jika parameter "jumlah" tidak ada, nilai 100% digunakan. Fungsi ini mirip dengan properti opacity yang lebih mapan; perbedaannya adalah dengan filter, beberapa browser menyediakan akselerasi perangkat keras untuk kinerja yang lebih baik. Nilai negatif tidak diperbolehkan.
kecerahan()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Menerapkan pengganda linier ke gambar input, membuatnya tampak lebih atau kurang cerah. Nilai 0% akan membuat gambar benar-benar hitam. Nilai 100% membiarkan input tidak berubah. Nilai lainnya adalah pengganda linier pada efeknya. Nilai dengan jumlah lebih dari 100% diperbolehkan, memberikan hasil yang lebih cerah. Jika parameter "jumlah" tidak ada, nilai 100% digunakan.
kontras()
filter: contrast(4); /* same as… */ filter: contrast(400%);Menyesuaikan kontras input. Nilai 0% akan membuat gambar benar-benar hitam. Nilai 100% membiarkan input tidak berubah. Nilai di atas jumlah di atas 100% diperbolehkan, memberikan hasil dengan kontras yang lebih sedikit. Jika parameter "jumlah" tidak ada, nilai 100% digunakan.
mengaburkan()
filter: blur(5px); filter: blur(1rem);Menerapkan Gaussian blur ke gambar masukan. Nilai 'radius' menentukan nilai deviasi standar ke fungsi Gaussian, atau berapa banyak piksel pada layar yang berbaur satu sama lain, jadi nilai yang lebih besar akan membuat lebih banyak blur. Jika tidak ada parameter yang diberikan, maka nilai 0 digunakan. Parameter ditentukan sebagai panjang CSS, tetapi tidak menerima nilai persentase.
drop-shadow ()
filter: drop-shadow((2,3) ?)Menerapkan efek bayangan jatuh ke gambar masukan. Drop shadow secara efektif adalah versi blur, offset dari topeng alfa gambar masukan yang digambar dalam warna tertentu, yang digabungkan di bawah gambar. Fungsi ini menerima parameter tipe (didefinisikan dalam CSS3 Backgrounds), dengan pengecualian kata kunci 'inset' tidak diperbolehkan.
Fungsi ini mirip dengan properti box-shadow yang lebih mapan; perbedaannya adalah dengan filter, beberapa browser menyediakan akselerasi perangkat keras untuk kinerja yang lebih baik.
Drop-shadow juga meniru garis objek yang dimaksud secara alami tidak seperti box-shadowyang hanya memperlakukan kotak sebagai jalurnya.
Sama seperti text-shadow, tidak ada parameter 'spread' untuk membuat bayangan solid lebih besar dari objek.
url ()
filter: url()The url()Fungsi mengambil lokasi file XML yang menentukan filter SVG, dan mungkin termasuk jangkar untuk elemen filter tertentu. Berikut adalah tutorial yang berfungsi sebagai pengantar filter SVG yang bagus dengan demo yang menyenangkan.
Filter Animasi
Karena Filter dapat dianimasikan, filter dapat membuka pintu untuk banyak kesenangan.
Catatan
Anda dapat menggabungkan sejumlah fungsi untuk memanipulasi rendering, tetapi urutan tetap penting (yaitu, menggunakan grayscale()setelah sepia()akan menghasilkan keluaran yang benar-benar berwarna abu-abu).
Nilai yang dihitung selain "tidak ada" menghasilkan pembuatan konteks yang bertumpuk dengan cara yang sama seperti opasitas CSS. Properti filter tidak berpengaruh pada geometri model kotak elemen target, meskipun filter dapat menyebabkan lukisan di luar kotak batas elemen. Setiap bagian dari elemen target dipengaruhi oleh fungsi filter. Ini mencakup konten, latar belakang, batas, dekorasi teks, kerangka, dan mekanisme pengguliran yang terlihat dari elemen tempat filter diterapkan, dan turunannya. Filter juga dapat diterapkan ke konten sebaris, seperti rentang teks individual.
Spesifikasi tersebut juga memperkenalkan filter(image-URL, filter-functions)fungsi pembungkus untuk gambar. Ini akan memungkinkan Anda untuk memfilter gambar apa pun pada saat Anda menggunakannya dalam CSS. Misalnya, Anda dapat memburamkan gambar latar belakang tanpa memburamkan teks. Fungsi filter ini belum didukung di browser. Sementara itu, Anda dapat menerapkan latar belakang dan filter ke elemen semu untuk membuat efek serupa.
Hal-hal filter milik IE
Juga menggunakan filterproperti, seperti:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Sebagian besar digunakan untuk opasitas saat Anda perlu mendukung IE 8 dan yang lebih lama.
Informasi Lebih Lanjut
- Spesifikasi Efek Filter W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Galeri Filter Bennett Feely
- Dokumen MDN
- Bisa Saya Gunakan
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Memahami Efek Filter CSS
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 18 * | 35 | Tidak | 79 | 6 * |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6.0-6.1 * |