Selamat Datang

Membuat Efek-Efek Instagram dengan CSS3 Filter

Dengan semakin berkembangnya CSS3 saat ini, membuat website semakin canggih, dan semakin nampak pintar, tentunya ini berita bagus untuk para web designer.

Kali ini kita akan membahas sedikit tentang CSS3 Filter.

Apa itu CSS3 Filter?

Filter membawa efek ke dom, dengan filter kita bisa membuat efek-efek yang biasanya kita lakukan dengan Adobe Photoshop atau software pengelola gambar lain nya ke dalam dokumen html kita, seperti gambar atau form.

Support Browser

Sayangnya saat ini hanya Chrome yang support fasilitas ini, jadi belum bisa diterlihat hasil nya jika menggunakan Firefox.

Cara Penggunaan

Pada tulisan ini kita akan mencoba beberapa efek CSS Filter yang bisa kita gunakan di untuk memberi efek pada sebuah gambar.

HTML

Pertama buat dulu struktur HTML seperti berikut ini

	<div class="twd-container">
		<div class="original">
			<img src="dance.jpg" alt="" />
		</div>
		
		<div class="filter">
			<img src="dance.jpg" alt="" />
		</div>
	</div>

CSS

Untuk css silahkan copy potongan script dibawah ini.

Blur

Blur

Blur


	.filter img{
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-ms-filter: blur(5px);
		-o-filter: blur(5px);
		filter: blur(5px);
	}

Grayscale

Grayscale

Grayscale


	.filter img{
		 -webkit-filter: grayscale(100%);
		 -moz-filter: grayscale(100%);
		 -o-filter: grayscale(100%);
		 -ms-filter: grayscale(100%);
		 filter: grayscale(100%);
	}

Sepia

Sepia

Sepia


	.filter img{
		-webkit-filter: sepia(100%);
		-moz-filter: sepia(100%);
		-o-filter: sepia(100%);
		-ms-filter: sepia(100%);
		filter: sepia(100%);
	}

Brightness

Brightness

Brightness


	.filter img{
		 -webkit-filter: brightness(0.3);
		 -moz-filter: brightness(0.3);
		 -o-filter: brightness(0.3);
		 -ms-filter: brightness(0.3);
		 filter: brightness(0.3);
	}

Saturation

Saturation

Saturation


	.filter img{
		 -webkit-filter: saturate(50%);
		 -moz-filter: saturate(50%);
		 -o-filter: saturate(50%);
		 -ms-filter: saturate(50%);
		 filter: saturate(50%);
	}

Hue-Rotate

Hue-Rotate

Hue-Rotate


	.filter img{
		filter: hue-rotate(180deg);
		-webkit-filter: hue-rotate(180deg);
		-moz-filter: hue-rotate(180deg);
		-o-filter: hue-rotate(180deg);
		-ms-filter: hue-rotate(180deg);
	}

Contrast

Contrast

Contrast


	.filter img{
		-webkit-filter: contrast(180%);
		-moz-filter: contrast(180%);
		-o-filter: contrast(180%);
		-ms-filter: contrast(180%);
		filter: contrast(180%);
	}

Invert

Invert

Invert


	.filter img{
		-webkit-filter: invert(100%);
		-moz-filter: invert(100%);
		-o-filter: invert(100%);
		-ms-filter: invert(100%);
		filter: invert(100%);
	}

Oke sekian artikel kali ini, semoga fitur Filter dari CSS3 ini segera selesai dan bisa diterapkan disemua browser.
Mungkin nanti kita bisa membuat web aplikasi layaknya instagram hanya dengan menggunakan CSS Filter.

Jangan lupa follow twitter kami di @tut_web
Salam Web Design Indonesia





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

3 thoughts on “Membuat Efek-Efek Instagram dengan CSS3 Filter

  1. […] bulan yang lalu tutorial-webdesign.com pernah membahas juga pada tulisan Membuat Efek-efek instagram dengan css3 filter, kali ini kita akan coba membuat yang efek grayscale yang bisa dijalankan di […]

  2. […] Membuat Efek-Efek Instagram dengan CSS3 Filter […]

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