Kang Rian [ on Blogger! ]

rian nurherdian, kang rian, blog kang rian, blog rian nurherdian, blogger hacks , free blogger templates, blogspot tutorial, blogger tutorial, tutorial seo, tutorial html5, blog seo friendly, modifikasi template blog, desain web pemula, blogger basic

Merubah Gambar Menjadi Hitam Putih dengan CSS

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="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/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 !
Suka artikel ini? Bagikan!

Hidden Ads!

 
Mohon Aktifkan Javascript!Enable JavaScript