Pengantar
Filter adalah alat canggih yang dapat digunakan penulis web untuk mendapatkan efek visual yang menarik. Dalam artikel ini, kami akan membahas sejarah efek filter, apa fungsinya dan cara menggunakannya. Kita akan membahas contoh dari semua filter standar yang ditentukan untuk CSS dengan beberapa contoh. Kami juga akan membahas pertimbangan performa saat menggunakannya di desktop dan perangkat seluler karena mengetahui dampak kecepatan filter sangat penting untuk pengalaman pengguna yang baik. Terakhir, kita akan meninjau status penerapan saat ini dalam browser modern.
Efek filter masa lalu, sekarang, dan masa depan
Efek filter berasal dari bagian spesifikasi Scalable Vector Graphics (SVG). Mereka dibuat untuk menerapkan sejumlah efek gambar berbasis piksel yang berbeda pada gambar vektor. Seiring waktu ketika vendor browser menambahkan kemampuan SVG ke dalam browser mereka, kegunaan filter menjadi semakin jelas. Robert O’Callahan dari Mozilla mendapatkan ide brilian tentang penggunaan filter SVG melalui penerapan CSS ke konten HTML 'normal'. Robert membuat prototipe versi awal yang menunjukkan betapa ampuhnya kombinasi filter dan gaya CSS. Kelompok kerja CSS dan SVG di W3C memutuskan untuk menyelaraskan penggunaan filter untuk HTML dan SVG melalui penataan gaya CSS, dan dengan demikian lahirnya properti 'filter' untuk CSS. Saat ini, satuan tugas gabungan yang menangani CSS dan SVG melakukan banyak hal untuk membuat filter berguna secara universal. Anda dapat menemukan spesifikasi terbaru untuk semua hal tersebut di sini.
Kehidupan baru untuk properti CSS ‘filter’
Deja Vu terkadang menabrak pengembang web saat melihat 'filter' dalam gaya CSS. Hal ini disebabkan oleh fakta bahwa Internet Explorer versi lama memiliki properti ‘filter’ yang diekspos melalui CSS untuk menjalankan beberapa fungsi khusus platform. Properti ini tidak digunakan lagi dan digantikan dengan properti 'filter' standar yang sekarang menjadi bagian dari CSS3. Jadi ketika Anda melihat ‘filter’ keluar secara bebas pada beberapa laman web lama, tidak perlu bingung. Properti 'filter' yang baru adalah tempat semua tindakan berada, dan IE versi baru menerapkannya sama seperti semua browser modern.
Cara kerja filter
Jadi, apa fungsi filter? Cara termudah untuk membayangkan filter adalah sebagai langkah pasca-pemrosesan yang menghasilkan sesuatu yang ajaib setelah semua konten halaman Anda ditata dan digambar.
Saat browser memuat halaman web, browser perlu menerapkan gaya, melakukan tata letak, lalu merender halaman sehingga ada sesuatu yang harus dilihat. Filter muncul setelah semua langkah tersebut dan tepat sebelum halaman disalin ke layar. Tindakannya adalah mengambil snapshot halaman yang dirender sebagai gambar bitmap, lalu melakukan beberapa keajaiban grafis pada piksel dalam snapshot, lalu menggambar hasilnya di atas gambar halaman aslinya. Salah satu konsepnya adalah seperti filter yang ditempatkan di bagian depan lensa kamera. Apa yang Anda lihat melalui lensa adalah dunia luar yang dimodifikasi oleh efek filter.
Tentu saja ini berarti ada waktu yang terpakai saat menggambar halaman dengan filter di atasnya, namun menggunakannya dengan benar akan berdampak minimal pada kecepatan situs Anda.
Selain itu, seperti halnya Anda dapat menumpuk sejumlah filter di depan satu sama lain pada lensa kamera, Anda dapat menerapkan sejumlah filter satu per satu untuk mencapai segala macam efek.
Filter yang ditentukan menggunakan SVG dan CSS
Karena filter berasal dari SVG, ada berbagai cara untuk mendefinisikan dan menggunakannya. SVG sendiri memiliki elemen <filter> yang menggabungkan definisi berbagai efek filter menggunakan sintaksis XML. Kumpulan filter yang ditentukan oleh CSS memanfaatkan model grafis yang sama, namun filter tersebut merupakan definisi yang jauh lebih sederhana yang mudah digunakan di lembar gaya.
Sebagian besar filter CSS dapat dinyatakan dalam filter SVG, dan CSS juga memungkinkan Anda mereferensikan filter yang ditentukan dalam SVG, jika diinginkan. Desainer filter CSS telah bekerja keras untuk membuat penerapan filter lebih mudah bagi penulis web, jadi artikel ini hanya akan membahas filter yang tersedia langsung dari CSS, untuk saat ini mengabaikan definisi SVG.
Cara menerapkan filter CSS
Penggunaan filter dari CSS dilakukan dengan menggunakan properti 'filter' yang diterapkan ke elemen apa pun yang terlihat di halaman web Anda. Untuk contoh yang sangat sederhana, Anda bisa menulis sesuatu seperti
div { { % mixin filter: grayscale(100%); % } }
dan konten di dalam semua <div>elemen di halaman akan berubah menjadi abu-abu. Cocok untuk membuat halaman Anda terlihat seperti gambar TV dari tahun 1940-an.
Sebagian besar filter menggunakan beberapa bentuk parameter untuk mengontrol seberapa banyak pemfilteran yang dilakukan. Misalnya, jika Anda ingin memberi gaya pada konten menjadi setengah jalan antara warna asli dan versi hitam putih, Anda dapat melakukannya seperti ini:
div { { % mixin filter: grayscale(50%); % } }
Jika Anda ingin menerapkan sejumlah filter yang berbeda satu per satu, hal ini mudah - cukup tempatkan filter secara berurutan di CSS seperti ini:
div { { % mixin filter: grayscale(100%) sepia(100%); % } }
Contoh tersebut pertama-tama akan membuat semua warna asli menjadi hitam putih, lalu menerapkan efek sepia, dan hasilnya akan terlihat seperti ini:
Dengan fleksibilitas yang tersedia untuk menerapkan filter satu per satu, segala jenis efek dapat dicapai - bebas untuk bereksperimen dengan menciptakan hasil yang luar biasa.
Efek filter apa yang tersedia menggunakan CSS
Jadi, mekanisme filter SVG asli sangat ampuh, tetapi pada saat yang sama, mungkin sulit digunakan. Karena itu, CSS memperkenalkan beberapa efek filter standar yang membuat penggunaannya menjadi sangat mudah.
Mari kita amati dan pelajari masing-masing peran tersebut.
- hitam putih(jumlah)
- Ini akan mengubah warna dalam gambar input menjadi warna abu-abu. 'Jumlah' yang diterapkan mengontrol jumlah konversi abu-abu yang diterapkan. Jika 100% maka semuanya akan berwarna abu-abu, jika 0% warna tidak berubah. Anda dapat menggunakan angka floating point di sini jika Anda lebih suka daripada persentase, yaitu 0 berfungsi sama dengan 0% sementara 1.0 berfungsi sama dengan 100%.
- sepia(jumlah)
- Ini memberikan warna yang diteruskan dalam semburat cokelat seperti di foto lama. 'Jumlah' yang diterapkan berfungsi dengan cara yang sama seperti filter 'skala abu-abu' - yaitu 100% membuat semua warna sepenuhnya berwarna cokelat keabu-abuan dan nilai yang lebih kecil memungkinkan efek diterapkan dalam proporsi yang lebih kecil.
- saturasi(jumlah)
- Ini menerapkan efek saturasi warna pada warna sehingga membuatnya terlihat lebih cerah. Ini adalah efek keren yang bisa membuat foto tampak seperti poster atau kartun.Efek ini juga memungkinkan Anda menggunakan nilai yang lebih besar dari 100% untuk benar-benar menekankan saturasi. Tentu saja efek yang dapat membuat segalanya terlihat sangat keren!
- hue-rotate(sudut)
- Yang ini sedikit efek geek warna yang dapat digunakan untuk hasil menarik. Yang dilakukannya adalah mengubah warna untuk membuat gambar input terlihat benar-benar berbeda. Jika Anda dapat membayangkan spektrum warna berubah dari merah menjadi ungu di sekitar roda warna, maka efek ini akan mengambil warna asli roda sebagai input dan memutarnya berdasarkan parameter 'sudut' untuk menghasilkan warna pada roda yang menjadi tempat rotasinya sebagai nilai warna output. Jadi semua warna dalam gambar digeser oleh 'sudut' yang sama pada roda. Hal ini tentu saja merupakan penyederhanaan fungsi, tetapi mudah-mudahan ini cukup masuk akal.
- invert(jumlah)
- Efek ini akan membalikkan warna, sehingga jika ‘jumlah’ yang diterapkan 100%, hasilnya akan terlihat seperti foto negatif dari masa lalu kamera. Sama seperti sebelumnya, menggunakan nilai yang lebih kecil dari 100% akan secara bertahap menerapkan efek terbalik.
- opasitas(jumlah)
- Jika Anda ingin konten difilter agar terlihat semi-transparan, ini yang cocok untuk Anda. Nilai ‘jumlah’ menentukan seberapa buram outputnya. Jadi nilai 100% benar-benar buram sehingga output akan persis sama dengan input. Saat nilai turun di bawah 100%, gambar output akan menjadi kurang buram (lebih transparan) dan Anda akan semakin jarang melihat gambar tersebut. Hal ini tentu saja jika tumpang tindih dengan sesuatu yang lain pada halaman, hal-hal di bawahnya akan mulai terlihat. 'Jumlah' 0% berarti akan benar-benar hilang - tetapi perhatikan, Anda masih bisa mendapatkan peristiwa seperti klik mouse dll. terjadi pada objek yang benar-benar transparan sehingga ini berguna jika Anda ingin membuat area yang dapat diklik tanpa menampilkan apa pun.
Fungsinya sama seperti properti 'opacity' yang sudah Anda ketahui. Secara umum, properti 'opacity' CSS tidak mengaktifkan akselerasi hardware, tetapi beberapa browser yang menerapkan filter menggunakan akselerasi hardware akan mempercepat versi filter opasitas untuk kinerja yang jauh lebih baik.
- kecerahan(jumlah)
- Ini seperti kontrol kecerahan di TV Anda. Fitur ini menyesuaikan warna antara benar-benar hitam dan warna asli secara proporsional dengan parameter 'amount'. Jika Anda mengatur satu ini ke 0%, Anda tidak akan melihat apa-apa kecuali hitam, tetapi saat nilainya naik menuju 100% Anda melihat semakin banyak gambar asli yang cerah, sampai Anda mencapai 100% yang sama dengan gambar input. Tentu saja Anda dapat terus melanjutkan - jadi mengatur sekitar 200% akan membuat gambar dua kali lebih terang dari aslinya - bagus untuk menyesuaikan foto dengan cahaya rendah!
- kontras(jumlah)
- Lebih banyak kontrol dari perangkat TV Anda! Ini akan menyesuaikan perbedaan antara bagian paling gelap dan paling terang dari gambar input. Jika Anda menggunakan 0%, maka Anda akan mendapatkan warna hitam seperti halnya 'kecerahan', jadi tidak terlalu menarik. Namun saat Anda meningkatkan nilai menuju 100%, perbedaan dalam kegelapan akan berubah sampai Anda mencapai 100% dan itu adalah gambar asli lagi. Anda juga dapat melampaui 100% untuk efek ini, yang semakin meningkatkan perbedaan antara warna terang dan gelap.
- blur(radius)
- Jika menginginkan tepian yang halus untuk konten, Anda dapat menambahkan blur. Yang satu ini terlihat seperti Vaseline klasik pada selembar kaca yang dulu menjadi teknik pembuatan film populer. Warna ini akan menyamarkan semua warna dan menyebarkan efeknya - seperti saat mata Anda tidak fokus. Parameter 'radius' memengaruhi jumlah piksel pada layar yang berbaur satu sama lain, sehingga nilai yang lebih besar akan membuat piksel semakin buram. Tidak ada perubahan yang tentu saja tidak mengubah gambar.
- drop-shadow(shadow)
- Sangat menyenangkan dapat membuat konten Anda terlihat seperti berada di luar sinar matahari dengan bayangan di tanah di belakangnya, dan tentu saja itulah fungsi 'drop-shadow'. Fungsi ini mengambil snapshot gambar, membuatnya menjadi satu warna, memburamkannya, lalu sedikit meng-offset hasilnya sehingga terlihat seperti bayangan dari konten aslinya. Parameter 'shadow' yang diteruskan sedikit lebih rumit daripada hanya nilai tunggal. Ini adalah serangkaian nilai yang dipisahkan oleh spasi - dan beberapa nilai juga bersifat opsional. Nilai 'shadow' mengontrol lokasi bayangan ditempatkan, seberapa banyak blur yang diterapkan, warna bayangan, dll. Untuk detail lengkap tentang apa yang dilakukan nilai 'shadow', spesifikasi CSS3 Backgrounds mendefinisikan 'box-shadow' dengan sangat detail. Beberapa contoh di bawah ini akan memberi Anda gambaran yang baik tentang berbagai kemungkinan yang ada.
Ini adalah operasi filter lain yang mirip dengan fungsi CSS yang ada yang tersedia melalui properti 'box-shadow'. Menggunakan pendekatan filter berarti mungkin mendapatkan akselerasi perangkat keras oleh beberapa browser seperti yang kami jelaskan untuk operasi 'opasitas' di atas.
- url yang merujuk ke filter SVG
- Karena filter berasal dari SVG, wajar saja jika Anda harus dapat menata gaya konten menggunakan filter SVG. Hal ini mudah dilakukan dengan proposal properti ‘filter’ saat ini. Semua filter dalam SVG ditentukan dengan atribut 'id' yang dapat digunakan untuk mereferensikan efek filter. Jadi, untuk menggunakan filter SVG dari CSS, yang perlu Anda lakukan adalah mereferensikannya menggunakan sintaks 'url'.
Misalnya, markup SVG untuk filter dapat berupa:
<filter id="foo">...</filter>
maka dari CSS Anda dapat melakukan sesuatu yang sederhana seperti:
div { { % mixin filter: url(#foo); % } }
dan selesai! Semua <div> dalam dokumen Anda akan diberi gaya dengan definisi filter SVG.
- kustom (segera hadir)
- Fitur yang akan segera hadir adalah filter kustom. Berbagai fitur ini memanfaatkan kekuatan GPU grafis Anda untuk menggunakan bahasa shading khusus guna menampilkan efek mengagumkan yang hanya dibatasi oleh imajinasi Anda sendiri. Bagian spesifikasi ‘filter’ ini masih dalam diskusi dan berubah-ubah, tetapi segera setelah spesifikasi ini mulai tersedia di browser terdekat, kami pasti akan menulis lebih banyak tentang apa yang mungkin dilakukan.
Pertimbangan performa
Satu hal yang menjadi perhatian setiap developer web adalah performa halaman atau aplikasi mereka. Filter CSS adalah alat canggih untuk efek visual, tetapi juga dapat memengaruhi performa situs Anda.
Memahami fungsi dan pengaruhnya terhadap performa sangatlah penting, terutama jika ingin situs Anda berfungsi dengan baik di perangkat seluler yang mendukung filter CSS.
Pertama, tidak semua filter dibuat sama. Bahkan, sebagian besar filter akan berjalan sangat cepat di platform apa pun dan memiliki dampak performa yang sangat kecil. Namun, filter yang melakukan pemburaman apa pun cenderung lebih lambat dibandingkan filter lain. Tentu saja ini berarti 'blur' dan 'drop-shadow'. Ini bukan berarti Anda tidak boleh menggunakannya, tetapi memahami cara kerjanya dapat membantu.
Saat Anda melakukan blur, kode tersebut akan mencampur warna dari piksel di seluruh piksel output untuk menghasilkan hasil yang buram. Jadi, misalnya jika parameter radius Anda adalah 2, filter perlu melihat 2 piksel ke segala arah di sekitar setiap piksel output untuk menghasilkan warna campuran. Hal ini terjadi untuk setiap piksel output, sehingga berarti banyak penghitungan yang menjadi lebih besar saat Anda meningkatkan radius. Karena blur melihat ke segala arah, menggandakan 'radius' berarti Anda harus melihat piksel 4 kali lebih banyak, sehingga sebenarnya 4 kali lebih lambat untuk setiap penggandaan radius. Filter drop-shadow berisi blur sebagai bagian dari efeknya sehingga juga berperilaku seperti blur saat Anda mengubah bagian radius dan spread dari parameter shadow.
blur tidak hilang karena di beberapa platform, GPU dapat digunakan untuk mempercepatnya, tetapi ketersediaannya belum tentu tersedia di setiap browser. Jika ragu, hal terbaik adalah bereksperimen dengan ‘radius’ yang memberikan efek yang Anda inginkan, lalu cobalah untuk menguranginya sebanyak mungkin sambil tetap mempertahankan efek visual yang dapat diterima. Menyesuaikan cara ini akan membuat pengguna lebih senang, terutama jika mereka menggunakan situs Anda dari ponsel.
Jika Anda menggunakan filter berbasis url yang mereferensikan filter SVG, filter tersebut dapat berisi efek filter arbitrer. Jadi, perlu diketahui bahwa filter juga bisa lambat. Jadi, pastikan Anda mengetahui fungsi efek filter dan bereksperimenlah di perangkat seluler untuk memastikan performanya bagus.
Ketersediaan di browser modern
Saat ini, sejumlah efek filter CSS tersedia di browser berbasis WebKit dan Mozilla. Kami berharap dapat segera melihatnya di Opera serta IE10. Karena spesifikasi masih dalam pengembangan, beberapa vendor browser telah menerapkan hal ini menggunakan awalan vendor. Jadi, dalam WebKit Anda perlu menggunakan -webkit-filter, di Mozilla Anda harus menggunakan
-moz-filter dan memperhatikan implementasi browser lainnya yang ditampilkan.
Tidak semua browser akan langsung mendukung semua efek filter, jadi hasil yang Anda peroleh akan bervariasi. Saat ini, browser Mozilla hanya mendukung fungsi filter: url() - tanpa awalan vendor, karena implementasi tersebut lebih awal dari fungsi efek lainnya.
Kami telah merangkum efek filter CSS yang tersedia di berbagai browser di bawah ini dengan kasar indikator performa saat diimplementasikan dalam perangkat lunak. Perhatikan bahwa sejumlah browser modern mulai menerapkan hal ini dalam hardware (GPU dipercepat). Jika dibangun dengan dukungan GPU, performa akan jauh meningkat untuk efek yang lebih lambat. Seperti biasa, menguji pada browser yang berbeda adalah cara terbaik untuk mengevaluasi performa.
| Efek filter | Dukungan browser | Performa |
|---|---|---|
| grayscale | Chrome | sangat cepat |
| warna cokelat keabu-abuan | Chrome | sangat cepat |
| saturasi | Chrome | sangat cepat |
| putar hue | Chrome | cepat |
| balikkan | Chrome | sangat cepat |
| opacity | Chrome | bisa jadi lambat |
| kecerahan | Chrome | cepat |
| kontras | Chrome | cepat |
| blur | Chrome | lambat kecuali dipercepat |
| drop-shadow | Chrome | bisa jadi lambat |
| url() | Chrome, Mozilla | Bervariasi, cepat ke lambat |
Referensi lain yang bermanfaat
Aplikasi lukisan abstrak interaktif dengan filter yang keren dan memungkinkan Anda bereksperimen dan membagikan karya seni Pastikan Anda melihat halaman filter interaktif Eric Bidelman yang bagus Tutorial tentang filter dengan contoh Spesifikasi draf W3C Filter Effects 1.0 resmi http://dev.w3.org/fxtf/filters/ Contoh UI yang dibuat menggunakan filter