Memanfaatkan prefix filter untuk membuat gambar lebih menawan

Memanfaatkan prefix filter untuk membuat gambar lebih menawan

  22 January    Andika

---

Memanfaatkan prefix filter, kita dapat membuat efek Brightness, Contrast, Grayscale, Invert, Blur, Sepia, Saturate, Hue-rotate dan Opacity pada gambar.

Efek yang paling banyak dan umum di gunakan adalah Opacity. Dulu saya juga menggunakan Opacity sebagai penganti efek Grayscale yang selalu gagal saya terapkan. Tidak ada hubungannya memang, Opacity ya Opacity, ini jelas beda dengan Grayscale. Tapi ya terpaksa, Entah karena waktu itu saya yang belum paham dengan CSS atau bagaimana. Sampai efek Grayscale yang menggunakan script tertentu pun telah saya coba, namun tetap saja tidak bekerja.

Sekarang cara penulisan CSS Grayscale yang benar dan bekerja telah saya coba dan berhasil diterapkan. Namun sayangnya, malah sekarang saya justru tidak tertarik untuk menggunakannya.

Dari pada mubazir, mending saya tulis di sini. Yah mana tahu suatu saat di butuhkan lagi.

Ini lah gambar normal alias tidak di beri efek apa pun.

Gambar di bawah ini adalah hasilkan dari pemanfaatan kode
filter:hue-rotate(180deg)

Gambar di bawah ini adalah hasilkan dari pemanfaatan kode
filter:brightness(0.25)

Gambar di bawah ini adalah hasilkan dari pemanfaatan kode
filter:contrast(160%)

Gambar di bawah ini adalah hasilkan dari pemanfaatan kode
filter:grayscale(100%)

Gambar di bawah ini adalah hasilkan dari pemanfaatan kode
filter:opacity(50%)

Gambar di bawah ini adalah hasilkan dari pemanfaatan kode
filter:invert(100%)

Gambar di bawah ini adalah hasilkan dari pemanfaatan kode
filter:blur(3px)

Gambar di bawah ini adalah hasilkan dari pemanfaatan kode
filter:sepia(100%)

Gambar di bawah ini adalah hasilkan dari pemanfaatan kode
filter:saturate(3)

Contoh penulisan CSSnya, Anggap saja kita ingin menggunakan filter:grayscale(100%) untuk membuat sebuah gambar terlihat abu-abu.

.abu-abu {
    filter:grayscale(100%);
 }

Untuk menampilkan efek pada gambar yang di inginkan, Berikut penulisan kode HTMLnya,

<div class="abu-abu"><img src="Letakan url gambar yang di inginkan disini!!" /></div>

Sebenarnya satuan yang di gunakan dalam efek filter yang telah saya tulis di atas hanyalah sebagai contoh saja. Jadi pengeditan tingkat lanjut mungkin saja di perlukan!