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... :-)
0 komentar:
Posting Komentar