Tutorial Web Design

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.

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:

• Membuat Gambar Hitam Putih Dengan CSS Filter
• Membuat Efek-Efek Instagram dengan CSS3 Filter

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