CSS3 : Images Filter

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.

HTML

<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>

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

body{
font-family:"segoe ui",calibri,arial,sans-serif;
background:whitesmoke;
text-align:center;
}
#wrapper{
width:960px;
margin:0 auto;
overflow:hidden;
}
figure{
float:left;
border-radius:2px;
padding:10px;
box-shadow:0 2px 5px rgba(0,0,0,.1);
margin:10px;
background:white;
}
figcaption{ text-align:center }
figure img{ -webkit-transition:-webkit-filter .5s ease-in-out; }
/* Sebagai fallback ketika browser lain support filter */
figure img{ -moz-transition:-moz-filter .5s ease-in-out; }
figure img{ -ms-transition:-ms-filter .5s ease-in-out; }
figure img{ -o-transition:-o-filter .5s ease-in-out; }
figure img{ transition:filter .5s ease-in-out; }

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

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.

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).

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”

Brightness

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

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

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%);
}

Saturate

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

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

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) ;
}

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%);
}

KESIMPULAN

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.

Untuk melihat demo / mengunduh index html nya silahkan klik button dibawah ini.

DEMO | DOWNLOAD