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.
Beberapa bulan yang lalu tutorial-webdesign.com pernah membahas juga pada tulisan Membuat Efek-efek instagram dengan css3 filter, namun sampai saat ini belum support Firefox, Namun kali ini kita akan coba membuat yang efek grayscale yang bisa dijalankan di Firefox.
Oke langsung saja kita praktek membuat.
Siapkan sebuah file dengan nama grayscale.html dengan struktur sebagai berikut
<h2>CSS Filter : <small><a href="http://www.tutorial-webdesign.com/grayscale-css3-filter/">http://www.tutorial-webdesign.com</a></small></h2>
<div class="normal">
<img src="http://www.tutorial-webdesign.com/wp-content/uploads/2013/03/coloredgrayscale.jpg" alt="">
</div>
<div class="grayscale">
<img src="http://www.tutorial-webdesign.com/wp-content/uploads/2013/03/coloredgrayscale.jpg" alt="">
</div>
Untuk kode css nya seperti ini
.grayscale{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
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+ */
}
.grayscale:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-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=\'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+ */
}
Pada css diatas kita membuat efek grayscale(hitam putih), namun ketika mouse hover gambar kembali berwarna.
Maka hasil nya sebagai berikut
Sekian tulisan kali ini,
Salam Web Design Indonesia
Image by : Unhindered by Talent
Mantap, mau tanya mas cara membuat web demonya itu gimanae mas
salam blogger
[…] Membuat Gambar Hitam Putih Dengan CSS Filter […]
ternyata mudah membuat foto hitam putih
thanks bro!
[…] Membuat Gambar Hitam Putih Dengan CSS Filter […]