Selamat Datang

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.

Grayscale NoCar

Image by : comzeraddt

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

Demo | Download Code

Sekian tulisan kali ini,

Salam Web Design Indonesia

Image by : Unhindered by Talent





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

4 thoughts on “Membuat Gambar Hitam Putih Dengan CSS Filter

  1. Mantap, mau tanya mas cara membuat web demonya itu gimanae mas
    salam blogger

  2. […] Membuat Gambar Hitam Putih Dengan CSS Filter […]

  3. ternyata mudah membuat foto hitam putih
    thanks bro!

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development