Bermain-main dengan CSS3 : Filter

Yang terbaru dari CSS3 adalah property Filter. Kini anda dapat menerapkan berbagai efek seperti sepia, grayscale, blur, brightness, contast dan lain-lain pada setiap Element HTML! sekali lagi, pada setiap Element.

DemonstrasiDownload

Jika sebelumnya kita hanya bisa menerapkan efek-efek di atas dalam photoshop lalu meng-exportnya menjadi sebuah gambar, namun kini Anda bisa melakukannya langsung lewat CSS3. Property ini diajukan oleh tim Webkit. Jadi, sampai saat artikel ini dibuat property ini hanya dapat digunakan di browser berbasis webkit terbaru.

Sebelum saya membahas setiap filter, mari kita buat objek percobaan kita berupa deretan gambar-gambar yang masing-masing akan diberi filter nantinya.

HTML

<div id="wrapper">
	<figure class="blur">
		<img src="1.jpg" alt="">
		<figcaption>Filter: Blur</figcaption>
	</figure>
	<figure class="grayscale">
		<img src="2.jpg" alt="">
		<figcaption>Filter: Grayscale</figcaption>
	</figure>
	<figure class="contrast">
		<img src="3.jpg" alt="">
		<figcaption>Filter: Contrast</figcaption>
	</figure>
	<figure class="brightness">
		<img src="4.jpg" alt="">
		<figcaption>Filter: Brightness</figcaption>
	</figure>
	<figure class="invert">
		<img src="5.jpg" alt="">
		<figcaption>Filter: Invert</figcaption>
	</figure>
	<figure class="saturate">
		<img src="6.jpg" alt="">
		<figcaption>Filter: Saturate</figcaption>
	</figure>
	<figure class="hue-rotate">
		<img src="7.jpg" alt="">
		<figcaption>Filter: Hue-rotate</figcaption>
	</figure>
	<figure class="sepia">
		<img src="8.jpg" alt="">
		<figcaption>Filter: Sepia</figcaption>
	</figure>
</div>

Pada markup di atas saya menggunakan beberapa tag HTML5 seperti figure, dan figcaption untuk penjelasan tag-tag tersebut silahkan kunjungi w3schools.com.
Untuk gambar, anda dapat menggunakan gambar yang terdapat di PC anda atau download Demonstrasi artikel ini.

CSS

Kita berikan style-style dasar untuk layouting :

body{
	font-family:"segoe ui",calibri,arial,sans-serif;
	background:whitesmoke;
	text-align:center;
}
#wrapper{
	width:960px;
	margin:0 auto;
	overflow:hidden; /*  Solusi floating, klik untuk baca tutorialnya */
}
figure{
	float:left;
	border-radius:2px; /* Klik untuk membaca tutorialnya */
	padding:10px;
	box-shadow:0 2px 5px rgba(0,0,0,.1); /* Klik untuk baca tutorial */
	margin:10px;
	background:white;
}
figcaption{
	text-align:center;
}
figure img{
	-webkit-transition:-webkit-filter .5s ease-in-out; /* baca tutorialnya disini */
}

Jika kita coba tampilkan dalam browser, kira-kira tampilannya seperti berikut :

Bermain-main dengan CSS3 : Filter

Selanjutnya kita masuk pada property-property yang menjadi topik utama artikel ini, CSS3 Filter.

Blur

Filter blur, seperti yang sudah anda ketahui, berfungsi untuk membuat gambar atau element menjadi blur, perhatikan cara penggunaan property filter blur berikut :

.blur:hover img{ 
	-webkit-filter:blur(2px);
}

(tambahkan kode di atas ke dalam file CSS anda) Yang perlu diperhatikan dari contoh di atas adalah property -webkit-filter, kemudia valuenya adalah blur(2px). -webkit-filter adalah property untuk menambahkan filter pada element, kemudian blur adalah fungsi filter blur dan besar nilai radiusnya berada di dalam kurung yakni 2px.
Sekarang cobalah untuk meng-hover/meletakkan cursor diatas gambar pertama dan perhatikan apa yang terjadi.

CSS3 Filter blur

Grayscale

Filter kedua ini berfungsi untuk mengubah element menjadi hitam putih.

.grayscale:hover img{
	-webkit-filter:grayscale(100%); 
}

Untuk nilai grayscale anda dapat bermain-main dengan nilai 0% hingga 100%(full grayscale).

CSS3 filter grayscale

Contrast

Filter ketiga adalah Contrast perhatikan kode berikut :

.contrast:hover img{ 
	-webkit-filter:contrast(20%); 
}

Seperti grayscale anda dapat bermain-main dengan nilai 0% sampai 100% untuk mengatur ke-contrast-an suatu gambar/element.
“Sebagian besar nilai dari filter menggunakan satua % kecuali untuk hue-rotate”

CSS3 filter Contrast

Brightness

Perhatikan dan tambahkan kode CSS berikut untuk mengatur brightness/Kecerahan pada element.

.brightness:hover img{ 
	-webkit-filter:brightness(20%); 
}
CSS3 Filter Brightness

Invert

Filter selanjutnya adalah Invert, filter ini akan merubah seluruh warna element menjadi kebalikannya, bayangkan saja film negatif.

.invert:hover img{ 
	-webkit-filter:invert(100%); 
}
CSS3 Filter Invert

Saturate

Filter Saturate berfungsi untuk mengatur kekuatan warna dari gambar/element.

.saturate:hover img{ 
	-webkit-filter:saturate(40%);
}
CSS3 Filter Saturate

Hue-rotate

Filter HUE ini berfungsi untuk mengatur nilai HUE dari suatu element, seperti disebeutkan sebelumnya, satuan yang digunakan adalah deg.

.hue-rotate:hover img { 
	-webkit-filter:hue-rotate(40deg) ;
}
CSS3 Filter hue-rotate

Sepia

dan yang terakhir adalah filter sepia yang akan membuat gambar/element menjadi kekuningan seperti foto jaman dulu.

.sepia:hover img { 
	-webkit-filter:sepia(90%); 
}
CSS3 filter Sepia

Kesimpulan

That’s All, save pekerjaan anda dan silahkan buka di browser chrome terbaru (19), hover salah satu gambar dan perhatikan apa yang akan terjadi. Yang perlu anda ingat adalah Property ini masih sangat baru dan hanya didukung oleh browser berbasis webkit seperti chrome (19+) dan Safari terbaru.

Category HTML & CSSTag , ,

7 Komentar untuk “Bermain-main dengan CSS3 : Filter

  1. mas, sya mau tanya…..
    membuat post menjadi grid yg gampang gmn ya?…. saya pake css display inline block di firefox saya g rata ( ada yg posisinya turun ) …. makasih klo d jawab

Tinggalkan Komentar Anda