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.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
.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.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.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.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.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.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/
Loading... |
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...