Selamat Datang

Memberi Efek Animasi Warna Pada Gambar Dengan CSS3 Filter

Membuat efek dengan css semakin marak saat ini, dengan menggunakan CSS Filter kita bisa membuat efek-efek yang biasanya kita temukan di Photoshop, bahkan efek-efek seperti instagram bisa kita ciptakan dengan kemampuan CSS3. CSS Filter ini relatif masih baru, dan masih jarang digunakan.

css3 filter effect

Pada tutorial kali ini kita akan mencoba membuat efek dengan CSS Filter di gabung dengan CSS Animation sehingga akan menghasilkan efek transisi warna gambar yang menarik. Sayang nya baru support browser webkit seperti Google Chrome atau Safari.

Penggunaan: Efek ini bisa digunakan untuk mempercantik Header, Gambar di website gallery, dan lainnya.

Artikel Terkait:

Langsung saja kita mulai dengan membuat file html.

HTML

Pada tulisan ini saya hanya menampilkan satu div saja, walaupun dalam demo nya akan banyak div karena untuk mempercantik tampilan demo, tapi intinya hanyalah satu div yang ada efek saja.

<div class="column1 my-cell">
	<img src="http://imcreator.com/wp-content/uploads/2014/01/wpid-Featured_Picture22.jpg" alt="">
	<div class="desc">
		<h1>Tutorial Web Design Indonesia</h1>
		<p><a href="http://www.tutorial-webdesign.com">http://www.tutorial-webdesign.com</a></p>
	</div>
</div>

Yang perlu diperhatikan disitu hanyalah pemberian class column1, karena kolom itu yang akan diberi efek dengan css.

CSS

Untuk memberi efek pada div yang berisi gambar tersebut kita kasih efek dengan menggunakan css berikut ini

.column1{
position: relative;
}
.column1 img{
width: 100%;
height: auto;
}

.desc{
position: absolute;
top: 50%;
left: 5%;
}
.desc h1{
color: #fff;
font-family: 'Hammersmith One', sans-serif;
font-size: 20px;
}
.desc a{
color: #ddd;
}

.column2{
padding: 40px;
}
.column2 p{
margin: 20px 0;
}
.column2 ul{
margin-left: 15px;
}
.column2 ul li{
border-bottom: 1px solid #ddd;
padding: 5px 0;
}


/* Animation */
@-webkit-keyframes pulse {
   0% { -webkit-filter: contrast(400%) grayscale(0%); }
100% { -webkit-filter: contrast(100%) grayscale(100%); }
}
@-webkit-keyframes mover	{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

.column1{

/* -webkit-filter: */
/* contrast(200%) */
/* brightness(25%) */
/* invert(100%) */
/* hue-rotate(110deg) */
/* grayscale(100%) */
/* sepia(100%) */
/* blur(10px); */

/* Bisa dipilih efek-efek diatas */

/* -webkit-transition: -webkit-filter 1s; */
-webkit-animation: pulse 3s alternate infinite
/*mover 5s alternate infinite*/;

}
.column1:hover	{ -webkit-filter: contrast(300%) hue-rotate(80deg) grayscale(100%) /* blur(2px) */; }

bisa dilihat disitu kita hanya menggunakan efek contrast dan grayscale saja, untuk efek lainnya bisa anda gunakan seperti invert, sepia, blur, dll.

Demo

Untuk anda yang sudah tidak sabar untuk melihat hasil yang telah dibuat bisa klik link demo dibawah ini atau download kode dari github.

DEMO (Webkit Browser: Chrome/Safari) | DOWNLOAD CODE

Sekian, semoga berguna untuk anda yang sedang mendalami CSS3.

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

4 thoughts on “Memberi Efek Animasi Warna Pada Gambar Dengan CSS3 Filter

  1. kalau pengguna mozilla berarti tidak dapat menikmati hasil ini donk, padahal level validasi CSS3 ini dapat bekerja pada peramban manapun,tetapi kok CSS diatas tidak bekerja ya..

    biasanya dengan moz dan o pasti dapat bekerja jika kita tambahkan pada CSS

  2. ahmadslack says:

    Wow keren. ntar coba ah.

  3. Syakir says:

    wew..keren banget bos (y)

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