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

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

Grayscale

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

Sepia

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

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

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

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

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

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

TWD Editorial

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”

Tutorial Web Design

Topik

Tags