Trick CSS3 Fitler ~ Dicky Berbagi

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Untuk kalian yang mungkin sudah familiar dengen efek filter yang ada photoshop pasti tentunya sudah tahu bagaimana efek filter seperti blur,sepia,grayscale,dll pada gambar.nah kali ini saya mau berbagi informasi,trik dan tutorial menarik lagi tentang CSS3 - Filters untuk Gambar dengan penerapan yang sederhana dan dasar.mungkin sudah ada beberapa yang tahu tentang trik ini,tapi bagi yang belum,bisa kalian coba dan mempelajari tentang dasar" syntax css Filter ini.semoga bermanfaat ^^

Untuk Penerapanya nanti cukup sederhana hanya sesuaikan css name pada class html,atau copy paste syntax css pada class/id html yang anda inginkan,misalkan contoh sederhana-nya :

HTML

<div class='~~nama-filter~~'>
<img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifqfEKa35B1g4W94BYC1b10gkd8JYezA-CuKA11SRwGFHhSt3xNd-_fdJN2vsQcmwFxDLoXfTfi1QB5wJSTQlPMhd4ZPcb6eOSK-FHyYSrz9w9DB75espLZXuW8VerSE1OskKAKqY_1uY/s400/30059960.jpg" width="283" />
</div>

nama-filter diganti dengan css name yang ada di contoh dibawah,misalkan saya pilih efek blur,HTML class-nya menjadi <div class='blur'> (tanpa tanda titik)

#class html dan css name harus sama agar trik ini WORK!

#CSS Diletakan diatas kode ]]</b:skin>

#HTML Diletakan diantara <body> isi html </body>

Oia sebelumnya Saya sarankan Gunakan CSS ini hanya untuk keperluan saja,mungkin kita tahu beberapa orang lebih sering menggunakan browser google chrome dengan versi terbaru(rekomendasi) ,oleh karena itu gunakan css yang memang untuk chrome (-webkit)

#ada kemungkinan mozilla belum mendukung css3 filter ini

Blur
Semakin Besar Nilai blur yang diberikan,maka efek blur pada gambar akan semakin pudar.

Sebelum Sesudah

CSS

.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}

Brightness
Semakin Besar Nilai Brightness atau kecerahan yang diberikan,maka gambar akan semakin terang.
dan sebaliknya juga diberi nilai dibawah 0 atau minus 1 gambar akan semakin gelap.
antara (-1.0 s/d 1.0)

Sebelum Sesudah

CSS

.Brightness {
filter: brightness(0.2);
-webkit-filter: brightness(0.2);
-moz-filter: brightness(0.2);
-o-filter: brightness(0.2);
-ms-filter: brightness(0.2);
}

Saturation
Semakin Besar Nilai Saturation atau ketajaman warna yang diberikan pada gambar,maka warna pada gambar akan semakin terang/cerah.

Sebelum Sesudah

CSS

.Saturation {
filter: saturate(2.0);
-webkit-filter: saturate(2.0);
-moz-filter: saturate(2.0);
-o-filter: saturate(2.0);
-ms-filter: saturate(2.0);
}

Hue-Rotate
Untuk Hue-Rotate,nilai yang diatur menggunakan derajat yang sesuai terhadap arah jarum jam prinsip roda warna sejauh 360 derajat.

Roda Warna

Sebelum Sesudah

CSS

.Hue-Rotate {
filter: hue-rotate(170deg);
-webkit-filter: hue-rotate(170deg);
-moz-filter: hue-rotate(170deg);
-o-filter: hue-rotate(170deg);
-ms-filter: hue-rotate(170deg);
}

Contrast
Semakin Besar Nilai Kontras yang diberikan pada gambar,maka tingkat kontras pada gambar akan semakin tinggi, dan begitu juga sebaliknya.

Sebelum Sesudah

CSS

.Contrast {
filter: contrast(150%);
-webkit-filter: contrast(150%);
-moz-filter: contrast(150%);
-o-filter: contrast(150%);
-ms-filter: contrast(150%);
}

Grayscale
Semakin Besar Nilai grayscale yang diberikan pada gambar,maka gambar akan semakin berubah warna menjadi abu-abu/gray.

Sebelum Sesudah

CSS

.Grayscale {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
}

Sepia
Efek photo filter Sepia akan semakin sempurna jika diberikan nilai 100%.

Sebelum Sesudah

CSS

.Sepia {
filter: sepia(100%);
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
}

Invert
Filter ini untuk membalikan warna yang ada pada gambar dengan batasan 0% - 100%

Sebelum Sesudah

CSS

.invert {
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
}

Transparency
Untuk efek transparant pastinya sudah tidak asing bukan,transparant juga dapat dikategorikan sebagai photo filter.

Sebelum Sesudah

CSS

.Transparency {
opacity:0.5;
filter:alpha(opacity=40);
}

Nah,apakah dalam satu gambar efeknya bisa kita satukan ,tentu saja bisa,kita bisa mengkombinasikan efek" filter seperti halnya filter pada photoshop,dan inilah hasil contoh nexperiment yang saya buat :

Hasil:

CSS

.jomixed {
filter: saturate(2.0);
-webkit-filter: saturate(2.0);
-moz-filter: saturate(2.0);
-o-filter: saturate(2.0);
-ms-filter: saturate(2.0);
filter: contrast(122%);
-webkit-filter: contrast(122%);
-moz-filter: contrast(122%);
-o-filter: contrast(122%);
-ms-filter: contrast(122%);
filter: hue-rotate(325deg);
-webkit-filter: hue-rotate(325deg);
-moz-filter: hue-rotate(325deg);
-o-filter: hue-rotate(325deg);
-ms-filter: hue-rotate(325deg);
}

Nah,setelah itu apa lagi yang dapat kita gunakan dengan css3 filter ini?
dengan css filter kita juga bisa buat sebagai hover efek dan animasi infinity ataupun animasi yang menggunakan keyframe.

misalkan untuk efek animasi hover,yg kita perlukan adalah css transition,misalkan kita beri nilai timing 0.5 detik.

CSS

-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;

Silakan anda coba arahkan kursor anda pada gambar dibawah ini.

HASIL :

Contoh 1

CSS

.blur-animasi {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;}
.blur-animasi:hover {
filter: blur(6px);
-webkit-filter: blur(6px);
-moz-filter: blur(6px);
-o-filter: blur(6px);
-ms-filter: blur(6px);
}

Contoh 2

CSS

.blur-animasi1 {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
filter: blur(6px);
-webkit-filter: blur(6px);
-moz-filter: blur(6px);
-o-filter: blur(6px);
-ms-filter: blur(6px);
}
.blur-animasi1:hover {
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}

Dan cara diatas juga sama untuk css filter lainya,mudah bukan? sekian penjelasan saya tentang >CSS3 Filters,Arigatou gozaimasu minna-san~ ja mata ne~ ^^/

Browse More Articles