Membuat Gambar Hitam Putih Dengan CSS Filter

Membuat gambar berwarna menjadi hitam putih dengan CSS3 adalah bahasan kita kali ini.  Dulu kita harus menggunakan Photoshop untuk memberi efek photo grayscale (hitam putih) untuk sebuah gambar, namun sekarang dengan kecanggihan fitur-fitur css3 kita tidak perlu capek2 mengeditnya di Photoshop, cukup dengan beberapa baris kode css kita sudah bisa membuat foto berwarna menjadi hitam putih

Penulisan kode css:

.grayscale{ 2     filter: grayscale(100%); 3     -webkit-filter: grayscale(100%); 4     -moz-filter: grayscale(100%); 5     -ms-filter: grayscale(100%); 6     -o-filter: grayscale(100%); 7     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+ */ 8 } 9 .grayscale:hover{ 10     filter: grayscale(0%); 11     -webkit-filter: grayscale(0%); 12     -moz-filter: grayscale(0%); 13     -ms-filter: grayscale(0%); 14     -o-filter: grayscale(0%); 15     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 

0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 16 }

DEMO 

Ditulis oleh : Ozoo

Diterbitkan : Wednesday, July 10, 2013

Pada katagori :

 Print This Page

Share it :

Facebook Twitter Google+ Linkedin

: Dozie alvisyah