Tutorial Membuat Gambar Menjadi Berwarna Hitam Putih di Blog

Membuat Gambar Menjadi Berwarna Hitam Putih

Letakkan kode di atas]]></b:skin>.

.post 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"></fecolormatrix></filter></svg>#grayscale"); /* Firefox 3.5+ */
-webkit-filter: grayscale(1); /* Google Chrome &amp; Safari 6+ */
filter: gray; /* IE6-9 */
 } 

Jika ingin memberikan efek hover ke warna aslinya tambahkan kode di bawah ini.

.post img:hover{filter: grayscale(0%);-webkit-filter: grayscale(0%);filter: url("data:image/svg+xml;utf8,<svg http:="" svg="" www.w3.org="" xmlns="\"><filter grayscale="" id="\"><fecolormatrix 0="" 1="" matrix="" type="\" values="\"></fecolormatrix></filter></svg>#grayscale");
} 

Sehingga menjadi seperti ini.

.post 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"></fecolormatrix></filter></svg>#grayscale"); /* Firefox 3.5+ */
-webkit-filter: grayscale(1); /* Google Chrome &amp; Safari 6+ */
filter: gray; /* IE6-9 */}

.post img:hover{filter: grayscale(0%);-webkit-filter: grayscale(0%);filter: url("data:image/svg+xml;utf8,<svg http:="" svg="" www.w3.org="" xmlns="\"><filter grayscale="" id="\"><fecolormatrix 0="" 1="" matrix="" type="\" values="\"></fecolormatrix></filter></svg>#grayscale");}

Jika ingin melihat demo klik tombol di bawah.

Click me To Wacthing Demo

Sumber : variasiblogger.blogspot.com