Membuat Gambar Bewarna Dengan CSS3 Filter

Membuat Gambar Bewarna Dengan CSS3 Filter adalah bahasan kita kali ini. Dulu kita harus menggunakan Photoshop untuk memberi efek photo grayscale (hitam putih) untuk sebuah gambar, namun sekarang dengan kecanggihan fitur-fitur css3 kita tidak perlu capek2 mengeditnya di Photoshop, cukup dengan beberapa baris kode css kita sudah bisa membuat foto berwarna menjadi hitam putih.

Beberapa bulan yang lalu tutorial-webdesign.com pernah membahas juga pada tulisan Membuat Efek-efek instagram dengan css3 filter, namun sampai saat ini belum support Firefox, Namun kali ini kita akan coba membuat yang efek grayscale yang bisa dijalankan di Firefox.

Oke langsung saja kita praktek membuat.

Siapkan sebuah file dengan nama grayscale.html dengan struktur sebagai berikut

[<h2>
CSS Filter : <small><a href="http://www.tutorial-webdesign.com/grayscale-css3-filter/">http://www.tutorial-webdesign.com</a></small></h2>
<div class="normal">
 <img src="http://www.tutorial-webdesign.com/wp-content/uploads/2013/03/coloredgrayscale.jpg" alt="">
</div>
<div class="grayscale">
 <img src="http://www.tutorial-webdesign.com/wp-content/uploads/2013/03/coloredgrayscale.jpg" alt="">
</div>]

Untuk kode css nya seperti ini:

[.grayscale{
 filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
}
.grayscale:hover{
 filter: grayscale(0%);
 -webkit-filter: grayscale(0%);
 -moz-filter: grayscale(0%);
 -ms-filter: grayscale(0%);
 -o-filter: grayscale(0%);
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\' values=\'0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
}]

Pada css diatas kita membuat efek grayscale(hitam putih), namun ketika mouse hover gambar kembali berwarna. Maka hasil nya sebagai berikut

Demo | Download Code