Trick CSS Filter Effects for Mozilla

Koben mau mengupdate sedikit seputaran support browsingan! Seperti yang kita ketahui sampai detik ini mozilla browse belum mendukung terhadap CSS filter effects. Apa saja CSS filter effect yg di maksud, here we go grayscale, blur, saturate, sepia, hue rotate, invert, brightness, contrast, & opacity. Variabel opacity sudah mendukung :p Var greyscale sudah bisa dengan melakukan pengakalan sbb make image to grayscale use svg or SVG inline sheet. Untuk variasi sepia, saturate, hue dan invert sobat bisa lakukan dengan langkah ini make tint effect for image used css3. Sekarang gue mau mencoba mengakali bagaimana efek blur berkerja pada browser mozilla. Seperti halnya pada efek grayscale, bantuan atribut SVG kita perlukan :)

Sebelum itu ada baiknya sobat melakukan cek & ricek support browser terlebih dahulu!
caniuse.com - www.w3schools.com/cssref/css3_browsersupport.asp
Mari kita mulai program tut's membikin efek grayscale agar berjalan mulus sesuai keinginan anda :d
DEMO (Hover on image)

Bagaimana hal itu bisa terjadi! Bukan sulap bukan sihir, tapi tekad kemauan dan kreatifitas :))
Markup HTML<img class="css-filter-blur" src="LINK-IMAGE-HERE" alt="" width="XXX" height="XXX" />
<svg class="svg">
<filter id="blur-effect-1">
<feGaussianBlur stdDeviation="0" />
</filter>
<filter id="blur-effect-2">
<feGaussianBlur stdDeviation="2" />
</filter>
</svg>

.css-filter-blur { 
-webkit-filter: blur(2px); 
filter: url(#blur-effect-1); 
}
.css-filter-blur:hover {
filter: url(#blur-effect-2);
}
.svg {
width: 0px !important;
height: 0px !important;
}

Pada markup HTML perhatikan kode stdDeviation="0" Isikan nominal, itulah efek mau seberapa ngeBLUR yg akan tampak. Pada kode CSS blur-effect-1 unik ID yg ada di syntax svg Jika efek blur yg mau terlihat pertama, tinggal rubah saja syntax svg-nya menjadi begini<svg class="svg">
<filter id="blur-effect-1">
<feGaussianBlur stdDeviation="3" />
</filter>
<filter id="blur-effect-2">
<feGaussianBlur stdDeviation="0" />
</filter>
</svg>

Demikian akhir lesson make effect blur specially for mozilla browser. Sudah 100% kita bisa mengakali CSS filter effects buat mozilla, walau ribet juga pemakaiannya :))
Berikut resource links usefully, harap buka menggunakan browser chrome:
developer.mozilla.org/en-US/docs/Web/CSS/filter
css-plus.com/2012/03/gaussian-blur
css-plus.com/2010/05/how-to-add-a-gaussian-blur-effect-to-elements-within-firefox
jsbin.com/uziyih
www.inserthtml.com/2012/06/css-filters
dr-dimitru.github.io/CSS3-Image-Editor
github.com/Schepp/CSS-Filters-Polyfill
demo.hongkiat.com/css-filter/index.html
www.paulund.co.uk/playground/demo/css-filters
html5-demos.appspot.com/static/css/filters/index.html
dvcs.w3.org/hg/FXTF/raw-file/default/filters/index.html
girliemac.com/blog/2011/12/21/quick-fun-css3-filter-effects
jsrun.it/ksk1015/RxGA
Happy blur \m/