Cara Membuat Elemen Web Menjadi Hitam Putih

MurliCyber    12/14/2014    Blogger , Css3 , Html , Tutorial    Comment   

Yeay, kali ini saya akan membahas tentang membuat elemen tertentu menjadi hitam putih, tutorial ini sangat simple, cuma menggunakan css doank untuk membuat elemen suatu halaman menjadi hitam putih, jadi ketika di hover element tersebut akan berubah menjadi warna awal nya kembali, cukup menggunakan css seperti ini

CSS
Letakkan kode nya di atas kode ]]><b:skin

#idelemen:before,#idelemen:after{background:#f7f7f7;border:0 solid #aaa;border-top:none;bottom:-3px;content:"";height:0;left:0;position:absolute;right:0}
#idelemen:after{bottom:-5px;box-shadow:0 0 0 #aaa;left:4px;right:4px}
#idelemen{filter:url("data:image/svg+xml;utf8,<svg http:="" svg="" www.w3.org="" xmlns="\"><filter grayscale="" id="\"><fecolormatrix 0.3333="" 0="" 1="" matrix="" type="\" values="\"></fecolormatrix></filter></svg>#grayscale");filter:gray;-webkit-filter:grayscale(1)}
#idelemen:hover{filter:none;-webkit-filter:grayscale(0)}

Demo

See the Pen dPMeOG by Ojik kidiw (@kidiw) on CodePen.

Ganti kode #idelemen dengan id elemen template kamu, yang ingin kamu hitam putih kan

Semoga Bermanfaat.