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 !
Komentar Terbaru