Merubah Gambar Menjadi Hitam Putih dengan CSS

Pada postingan kali ini saya akan membagikan/memberitahukan "Bagaimana Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS".

Berikut demonstrasi nya :


1. Simpan Kode dibawah ini tepat di atas kode </head> pada halaman EDIT HTML :

<style type="text/css">
.hitamputih { 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+ */ 
 -webkit-filter: grayscale(1); /* Google Chrome  Safari 6+ */
 filter: gray; /* IE6-9 */ }
.hitamputih:hover {filter: grayscale(0%);
-webkit-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=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale")}
</style>

2. Berikut contoh untuk memanggil kode CSS di atas :

<img class="hitamputih" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5XceLrpg8G3nmUrSUW2qB2x7Osvi8wGj_7jQmNXkKiwVUnaYRyLSp3RneXj_z5NJoEQrjL193oaVszfSl-tQ6Bw60qqnBpqOnnFaju0iwtTpQOvICPUf3rE6dd1kWpITp8moY2CpZd_4/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg"/>

UPDATE ( Rabu - 03/07/2013 ) Jika anda ingin membuat semua gambar yang ada di blog anda secara otomatis menjadi hitam putih / (grayscale) dan menjadi berwarna ketika di sentuh!.. silahkan Tempel kode dibawah ini sebelum kode ]]></b:skin> pada Edit HTML :

.post img, .sidebar img{
 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+ */ 
 -webkit-filter: grayscale(1); /* Google Chrome  Safari 6+ */
 filter: gray; /* IE6-9 */
 }

    .post img:hover, .sidebar img:hover{
filter: grayscale(0%);
-webkit-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=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

Semoga Tutorial Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS ini bermanfaat .. terima kasih !