CSS Inline Finessing feColorMatrix Experiment only for Mozilla

Update 2 artikel dari yang sebelumnya. Pertama dr post give effect for image use CSS gram dan eksperimen gue tentang snippet CSS inline for mozilla Untuk yg belum baca, silahkan kunjungi beberapa link berikut trick CSS filter effects for mozilla, snippet inline CSS filter code for mozilla, snippet inline CSS filter for mozilla or snippet inline css filter for mozilla ii.
Sumber penjelasan datang dari web terkenal alistapart, by Una Kravets talking about Finessing `feColorMatrix` Dari situh AA kembangkan dengan experiment inline CSS filter ;))

Singkat cerita syntax SVG yg jika dituliskan pada browser mozilla gue rubah!
Basic layout of an SVG filter goes like this:<svg>
<filter id="filterName">
// filter definition here can include
// multiple of the above items
</filter>
</svg>SVG filter saat ini didukung dalam browser Can I use. Setelah dihitung-hitung ada ± 24 effect SVG filter :-O Lets cek get dot bro...

RED.red {
filter: url(#red-effect);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'red-effect\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\' /></filter></svg>#red-effect");
}BLUE.blue {
filter: url(#blue-effect);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blue-effect\'><feColorMatrix type=\'matrix\' values=\'0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0\'/></filter></svg>#blue-effect");
}GREEN.green {
filter: url(#green-effect);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'green-effect\'><feColorMatrix type=\'matrix\' values=\'0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0\' /></filter></svg>#green-effect");
}YELLOW.yellow {
filter: url(#yellow-effect);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'yellow-effect\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0\' /></filter></svg>#yellow-effect");
}CYAN.cyan {
filter: url(#cyan-effect);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'cyan-effect\'><feColorMatrix type=\'matrix\' values=\'0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\' /></filter></svg>#cyan-effect");
}MAGENTA.magenta {
filter: url(#magenta-effect);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'magenta-effect\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0\' /></filter></svg>#magenta-effect");
}ALPHA.alpha {
filter: url(#alpha-effect);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'alpha-effect\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .5 0\' /></filter></svg>#alpha-effect");
}HARD GREEN.hard-green {
filter: url(#hard-green-effect);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'hard-green-effect\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 1 0 1 0 0 0 1 0 0 0 0 0 1 0\' /></filter></svg>#hard-green-effect");
}HARD YELLOW.hard-yellow {
filter: url(#hard-yellow-effect);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'hard-yellow-effect\'><feColorMatrix type=\'matrix\' values=\'1 0 0 1 0 0 1 0 1 0 0 0 1 0 0 0 0 0 1 0\' /></filter></svg>#hard-yellow-effect");
}BLUE SHADOW.blue-shadow {
filter: url(#blue-shadow-magenta-highlight);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blue-shadow-magenta-highlight\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 1 0\' /></filter></svg>#blue-shadow-magenta-highlight");
}RED OVERLAY.red-overlay {
filter: url(#red-overlay);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'red-overlay\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 0 0 0 0 0 0 1 -1 0 0 0 0 1 0\' /></filter></svg>#red-overlay");
}IDENTICAL RED OVERLAY.identical-red-overlay {
filter: url(#identical-red-overlay);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'identical-red-overlay\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\' /></filter></svg>#identical-red-overlay");
}BLUE MAGENTA 2.blue-magenta-2 {
filter: url(#blue-magenta-2);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blue-magenta-2\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 0 0 0 0 0 0 1 .5 0 0 0 0 1 0\' /></filter></svg>#blue-magenta-2");
}ELIM BLUE.elim-blue {
filter: url(#elim-blue);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'elim-blue\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 -2 1 0\' /></filter></svg>#elim-blue");
}NO G RED.no-g-red {
filter: url(#no-g-red);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'no-g-red\'><feColorMatrix type=\'matrix\' values=\'1 1 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0\' /></filter></svg>#no-g-red");
}NO G MAGENTA.no-g-magenta {
filter: url(#no-g-magenta);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'no-g-magenta\'><feColorMatrix type=\'matrix\' values=\'1 1 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 1 0\' /></filter></svg>#no-g-magenta");
}YES G COLORIZED MAGENTA.yes-g-colorized-magenta {
filter: url(#yes-g-colorized-magenta);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'yes-g-colorized-magenta\'><feColorMatrix type=\'matrix\' values=\'1 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0 0 1 0\' /></filter></svg>#yes-g-colorized-magenta");
}DARKEN.darken {
filter: url(#darken);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'darken\'><feColorMatrix type=\'matrix\' values=\'.5 0 0 0 0 0 .5 0 0 0 0 0 .5 0 0 0 0 0 1 0\' /></filter></svg>#darken");
}LIGHTEN.lighten {
filter: url(#lighten);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'lighten\'><feColorMatrix type=\'matrix\' values=\'1.5 0 0 0 0 0 1.5 0 0 0 0 0 1.5 0 0 0 0 0 1 0\' /></filter></svg>#lighten");
}GRAY ON LIGHT.gray-on-light {
filter: url(#gray-on-light);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'gray-on-light\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0\' /></filter></svg>#gray-on-light");
}GRAY ON MID.gray-on-mid {
filter: url(#gray-on-mid);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'gray-on-mid\'><feColorMatrix type=\'matrix\' values=\'0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 1 0\' /></filter></svg>#gray-on-mid");
}GRAY ON DARK.gray-on-dark {
filter: url(#gray-on-dark);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'gray-on-dark\'><feColorMatrix type=\'matrix\' values=\'0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1 0\' /></filter></svg>#gray-on-dark");
}PEACHY.peachy {
filter: url(#peachy);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'peachy\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 .5 0 0 0 0 0 0 .5 0 0 0 0 1 0\' /></filter></svg>#peachy");
}LIME.lime {
filter: url(#lime);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'lime\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 2 0 0 0 0 0 0 .5 0 0 0 0 1 0\' /></filter></svg>#lime");
}BYE :-h