Prodigy of Head | Snippet Inline CSS Filter for Mozilla II

Link to Tutorial Blog for Stylish Blogger

Snippet Inline CSS Filter for Mozilla II

Posted: 22 Dec 2013 10:05 PM PST

Aa Koben cuma mau update postingan sedikit mengenai inline CSS filter for mozilla! Itung-itung menyimpan kode dari pada ilang. Sebenarya mau update di sana, tetapi kedudukan kode sudah berubah yang ada pada editor post blog. Sehingga demo tidak berjalan dengan baik ;)) Sama dengan yg sebelumnya, di sini saya akan berbagi kode inline CSS dengan efek unyu² punya. Kode CSS spesial hanya untuk browser mozilla. Kita mulai saja...

Original Image

Edge Effect post-img

.edge-effect {
  -webkit-filter: url(#EdgeDetectFilter);
  filter: url(#EdgeDetectFilter);  
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'EdgeDetectFilter\'><feConvolveMatrix preserveAlpha=\'true\' kernelMatrix=\'-5 0 0 0 0 0 0 0 5\'/></filter></svg>#EdgeDetectFilter");  
}

Sharpen Effect post-img

.sharpen {
  -webkit-filter: url(#SharpenFilter);
  filter: url(#SharpenFilter);  
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'SharpenFilter\'><feConvolveMatrix preserveAlpha=\'true\' kernelMatrix=\'0 -1 0 -1 5 -1 0 -1 1\'/></filter></svg>#SharpenFilter");  
}

Emboss Effect post-img

.emboss {
  -webkit-filter: url(#EmbossFilter);
  filter: url(#EmbossFilter);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'EmbossFilter\'><feConvolveMatrix order=\'5 5\' preserveAlpha=\'true\' kernelMatrix=\'-1 0 0 0 0 0 -2 0 0 0 0 0 3 0 0 0 0 0 0 0 0 0 0 0 0\'/></filter></svg>#EmbossFilter");    
}

Luminance Mask post-img

.luminance-mask {
  -webkit-filter: url(#LuminanceMaskFilter);
  filter: url(#LuminanceMaskFilter); 
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'LuminanceMaskFilter\'><feColorMatrix type=\'luminanceToAlpha\'/></filter></svg>#LuminanceMaskFilter");    
}

Posterize Effect post-img

.posterize {
  -webkit-filter: url(#PosterizeFilter);
  filter: url(#PosterizeFilter);  
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'PosterizeFilter\'><feComponentTransfer><feFuncR type=\'discrete\' tableValues=\'0 0.25 0.5 0.75 1\' /><feFuncG type=\'discrete\' tableValues=\'0 0.25 0.5 0.75 1\' /><feFuncB type=\'discrete\' tableValues=\'0 0.25 0.5 0.75 1\' /></feComponentTransfer></filter></svg>#PosterizeFilter");
}

Gradient Effect post-img

.gradient {
  -webkit-filter: url(#GradientMapFilter);
  filter: url(#GradientMapFilter);    
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'GradientMapFilter\'><feColorMatrix type=\'matrix\' values=\'0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0\' /><feComponentTransfer><feFuncR type=\'table\' tableValues=\'0 1 0 1\' /><feFuncG type=\'table\' tableValues=\'0 0 0.4 1\' /><feFuncB type=\'table\' tableValues=\'0 0 .4 1\' /></feComponentTransfer></filter></svg>#GradientMapFilter");
}

X-Ray Effect post-img

.xray {
  -webkit-filter: url(#XRayFilter);
  filter: url(#XRayFilter);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'XRayFilter\'><feColorMatrix type=\'matrix\' values=\'0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0\' /><feComponentTransfer><feFuncR type=\'table\' tableValues=\'1 0\' /><feFuncG type=\'table\' tableValues=\'1 0\' /><feFuncB type=\'table\' tableValues=\'1 0\' /></feComponentTransfer></filter></svg>#XRayFilter");
}

Demikian update efek CSS inline filter for mozilla. Semoga bermanfaat :)

Bonus:

codepen.io/krnlde/pen/DELyA, codepen.io/larrygeams/pen/evBKs, codepen.io/zessx/pen/ILJyG, codepen.io/MrHill/pen/BnyLx, codepen.io/Joe_Temp/pen/mzfoi, codepen.io/0x04/pen/tbrHx, codepen.io/Sonick/pen/vijJl, codepen.io/Hornebom/pen/clDsr, codepen.io/awgreenblatt/pen/vFyqI, codepen.io/awgreenblatt/pen/zLirE, codepen.io/auginator/pen/nbksy, codepen.io/awgreenblatt/pen/Kdsfr, codepen.io/alexjoen/pen/ikIlf, codepen.io/fivera/pen/rHigj, codepen.io/stefanjudis/pen/tswuH, codepen.io/vergun/pen/bvien, codepen.io/frxnz/pen/spyvC, codepen.io/Xanmia/pen/otAgz, codepen.io/WhiteWolfWizard/pen/qkBhI
Happy coding \m/

Prodigy of Head | Snippet Inline CSS Filter for Mozilla II

Prodigy of Head | Snippet Inline CSS Filter for Mozilla II

Next

Newer Post

Previous

Older Post