Seperti yang kita tahu bahwa aplikasi photoshop sangat mendukung sekali untuk edit foto, warna, ataupun manipulasi gambar karikatur. Tidak heran banyak orang yang mempelajari photoshop karena memang banyak peluang disana dan banyak perusahaan menggunakan aplikasi ini. Salah satunya adalah manipulasi warna gambar, seperti memberikan gambar contrast, brightness dll. Nah pada kesempatan kali ini saya akan mencoba memberikan tips dan trik yaitu Mengenal Fungsi Filter Pada CSS, kita akan menggunakan fitur photoshop contrast,brightness, grayscale, huerotate, invert, opacity dan akan kita tuangkan kedalam CSS. Dimana fitur ini juga ada pada CSS, pada latihan kali ini kita akan membuat sebuah gambar dan akan kita berikan filter kemudian teman – teman akan lihat perbedaannya. Pertama – tama kalian siapkan gambarnya terlebih dahulu, disini saya menggunakan gambar icon Dumet School

Kemudian siapkan text editornya dan copy script di bawah ini

Pastekan pada text editornya dan save dengan nama index.html, maka hasilnya seperti gambar di bawah ini

Mengenal Fungsi Filter Pada CSS

Berikutnya kita akan implementasikan Mengenal Fungsi Filter Pada CSS, teman – teman tambahkan fungsi css nya di bawah ini untuk memberikan efectnya yang kita sudah buat class nya pada tag <img> nya. Copy script css nya di bawah ini

Jika sudah save dan refresh pada browsernya, makas hasil screen shoot nya di bawah ini jika berhasil

Mengenal Fungsi Filter Pada CSS

Bisa kalian lihat pada gambar di atas ini masing – masing gambar memiliki efect yang berbeda – beda karena diatur oleh efect css nya, dan type – type efect sesuai class yang kita berikan pada cssnya.

Bukan hanya photosop yang memiliki fitur seperti itu tetapi css juga menyediakan fitur untuk merubah tampilan image, bagaimana..? Sangat mudah bukan,,??!!

Baik, cukup sekian dulu pada artikel kali ini tentang Mengenal Fungsi Filter Pada CSS, kita berjumpa kembali pada artikel berikutnya. Semoga bisa menjadi tambahan pengetahuan untuk teman – teman yang khususnya baru belajar HTML dan CSS. Terima Kasih dan Sampai Jumpa

Semoga Bermanfaat 😉