Cara membuat efek animasi warna pada gambar menggunakan CSS3 filter

hello... kali ini saya akan post tentang Cara membuat efek animasi warna pada gambar menggunakan CSS3 filter. dengan menggunakan CSS3 kita bisa membuat efek-efek seperti yang kita lihat di Photoshop, kemudian kita bisa membuat efek-efek seperti di instagram hanya dengan CSS3. dan CSS3 Filter ini masih jarang digunakan, karena CSS3 ini relatif masing baru. kali ini saya akan membuat tutorial CSS Filter digabung dengan CSS Animasi sehingga menghasilkan efek transisi dengan warna gambar yang sangat menarik dan berubah rubah. tapi sayangnya metode ini hanya suport di Google Chrom atau Safari.

Ok langsung saja ke tutorial....

Efek CSS3

Pertama kita buat Code HTMLnya seperti berikut ini.

<div class="column1 my-cell">
<img src="http://jafarshidiq30.files.wordpress.com/2012/07/pantai_citepus_sukabumi.jpg" alt="">
<div class="desc">
<h1>Tutorial052.Blogspot.com</h1>
<p><a href="http://www.tutorial052.blogspot.com">http://www.tutorial052.blogspot.com</a></p>
</div>
</div>

Column1 adalah target yang akan kita kasih efek.

kemudian code CSSnya seperti berikut ini.

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

.desc{
position: absolute;
top: 70%;
left: 5%;
}
.desc h1{
color: #fff;
font-family: 'Hammersmith One', sans-serif;
font-size: 40px;
}
.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) */; }

Disini saya hanya gunakan efek Contras dan Grayscale saja, mungkin kalian bisa tambah efek-efek lainnya seperti Sepia, Invert, blur, dll.

Demo :

DOWNLOAD

sumber tutorial : http://www.tutorial-webdesign.com/

"Tetap berkarya sesuai selera masing-masing"

Ketik Ctrl + D untuk membookmark halaman ini