Membuat Efek Menggunakan CSS Filter

Halo sob... Ada yang sudah pernah tahu tentang CSS Filter? Kali ini ane mau membahas tentang CSS Filter. Apa itu? CSS Filter merupakan alat / tool yang digunakan untuk mengolah berbagai macam efek visual yang biasa digunakan pada Gambar (Image), Latar (Background), atau Garis Tepi (Border) dalam browser. Pada CSS Filter disediakan beberapa fasilitas seperti efek Blur, Hitam putih / grayscale, shadow, dan lain sebagainya.

Singkatnya, langsung aja menggunakan beberapa sintaks dibawah dan letakkan ke dalam kode css sobat...

.class_filter {
  /*
Ini adalah sintaks default yang ada pada CSS Filter.
Pada dasarnya menggunakan skala 0-1 (bisa lebih)
NB: untuk hue-rotate() ada penambahan unit (deg) dan blur() dengan (px)
 */
  filter: grayscale(0);
  filter: sepia(0);
  filter: saturate(1);
  filter: hue-rotate(0deg);
  filter: invert(0);
  filter: opacity(1);
  filter: brightness(0);
  filter: contrast(1);
  filter: blur(0px);

  /* untuk Drop shadow memiliki sintaks yang sama seperti box-shadow */
  filter: drop-shadow(5px 5px 10px #ccc);
}

Sintaks tersebut hanya support dengan Chrome 18.0+ dan Safari 6+.
Namun agar bisa berjalan dibawah versi tersebut, gunakan contoh sintaks berikut:

/* bisa menggunakan persen */
.img{
  -webkit-filter:contrast(100%);
  -webkit-filter:brightness(100%);
 }

Untuk lebih jelasnya, silahkan buka link berikut:
code.tutsplus.com/tutorials/say-hello-to-css3-filters
css3.bradshawenterprises.com/filters/

Untuk penjelasan detail beserta live demo (codepen), bisa dilihat di:
css-tricks.com/almanac/properties/f/filter/

Semoga bisa membantu... :-)