Prodigy of Head | Snippet Inline CSS Filter Code for Mozilla

Link to Tutorial Blog for Stylish Blogger

Snippet Inline CSS Filter Code for Mozilla

Posted: 04 Dec 2013 08:13 PM PST

Penasaran, merasa bisa, pelajari, coba-coba and ketemu. Di awali dengan rasa penasaran melihat demo yang tidak berjalan baik pada browser mozilla cdpn.io/vfueH & cdpn.io/uIiJp Selidik mempelajari ternyata kode CSS yang di pakai menggunakan CSS Filter. Seperti di ketahui bersama, bahwa mozilla sampai dengan versi 25.0 belum mendukung 100% terhadap fitur CSS-Filter menurut laporan web caniuse.com/css-filters Belum mendukung di sini adalah dalam artian browser mozilla mempunyai penulisan syntax tersendiri guna menampilkan fitur CSS_Filter tersebut tidak seperti browser lainnya yg sudah mendukung!
Berikut beberapa links resource seputar issue CSS3 Filters (buka dengan selain mozilla)

html5-demos.appspot.com/static/css/filters/index.html
www.paulund.co.uk/css3-image-filters
www.inserthtml.com/2012/06/css-filters

Jangan kebanyakan entar malah pusing :P Contoh 2 demo dari web codepen (yg di awal postingan tadi) gua coba forked agar berjalan di mozilla, cek gi dot cdpn.io/Iolpu n cdpn.io/wegIJ Bonus ini mah cdpn.io/uHrdi Link bonus itulah yg membuat AA Koben penasaran agar dapat menampilkan fitur CSS Filters bisa tampil di mozilla dengan gaya penulisan internal style sheet? Bakalan repot kalau kita harus menuliskan syntax satu per satu beserta dengan syntax tag svg filter CSS MDN

Gue pernah 2x membahas trick css filter effects for mozilla, blur effect, grayscale effect 'n update grayscale. Saat ini saya akan mencoba berbagi trik menerapkan kode css efek filter secara internal tentunya ;) Maaf jika salah koding, sayah hanya berguru pada eyang otodidak bukan ahli koding CSS, dan sudah melewati tes yg saya sendiri sebagai peneliti, muluusss hasilnya :D Browser mozilla yg saya pakai version 18.0.1
Kita mulai...

Original Image post-img

Blur Effect

.blur { 
filter: url(#blur-effect); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur-effect\'><feGaussianBlur stdDeviation=\'3\' /></filter></svg>#blur-effect");
}

Grayscale Effect

.grayscale {
filter: url(#grayscale); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

Brightness Effect

.brightness {
filter: url(#brightness); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'brightness\'><feComponentTransfer><feFuncR type=\'linear\' slope=\'1\' intercept=\'0.5\' /><feFuncG type=\'linear\' slope=\'2\' intercept=\'0.5\' /><feFuncB type=\'linear\' slope=\'3\' intercept=\'0.5\' /></feComponentTransfer></filter></svg>#brightness");
}

Contrast Effect

.contrast {
filter: url(#contrast); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'contrast\'><feComponentTransfer><feFuncR type=\'linear\' slope=\'1\' intercept=\'-(0.5 * 1) + 0.5\' /><feFuncG type=\'linear\' slope=\'2\' intercept=\'-(0.5 * 2) + 0.5\' /><feFuncB type=\'linear\' slope=\'3\' intercept=\'-(0.5 * 3) + 0.5\' /></feComponentTransfer></filter></svg>#contrast");
}

Shadow Effect

.shadow {
filter: url(#shadow); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'shadow\'><feGaussianBlur stdDeviation=\'5\' /><feOffset dx=\'5\' dy=\'3\' result=\'offsetblur\' /><feFlood flood-color=\'black\' /><feComposite in2=\'offsetblur\' operator=\'in\' /><feMerge><feMergeNode/><feMergeNode in=\'SourceGraphic\' /></feMerge></filter></svg>#shadow");
}

Hue Effect

.hue { 
filter: url(#hue-rotate); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'hue-rotate\'><feColorMatrix type=\'hueRotate\' values=\'180\' /></filter></svg>#hue-rotate");
}

Invert Effect

.invert { 
filter: url(#invert); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feComponentTransfer><feFuncR type=\'table\' tableValues=\'0 0.5\' /><feFuncG type=\'table\' tableValues=\'0 0.4\' /><feFuncB type=\'table\' tableValues=\'0 0.3\' /></feComponentTransfer></filter></svg>#invert");
}

Opacity Effect

.opacity { 
filter: url(#opacity); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'opacity\'><feComponentTransfer><feFuncA type='\table'\ tableValues='\0 0.5'\ /></feComponentTransfer></filter></svg>#opacity");
}

Sepia Effect

.sepia { 
filter: url(#sepia); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'sepia\'><feColorMatrix type='\matrix'\ values='\.1 .669 .99 0 0 .29 .66 .13 0 0 .17 .34 .11 0 0 .00 .00 .00 1 0'\  /></filter></svg>#sepia");
}

Saya mostingnya pusing bray, kebanyakan kode. Bermain-mainlah dengan kode dasar CSS effect di atas! Ingat!!! Setiap nilai nominal, type berefek pada hasil. Gue tidak akan menjelaskan, bikin ini saja sudah amit-amit puyeung.
Resource lagi:
css3.bradshawenterprises.com - www.w3.org/TR/SVG11/filters.html - docs.webplatform.org/wiki/svg/tutorials/smarter_svg_filters
Happy coding \m/

Prodigy of Head | Snippet Inline CSS Filter Code for Mozilla

Prodigy of Head | Snippet Inline CSS Filter Code for Mozilla

Next

Newer Post

Previous

Older Post