Selasa, 28 April 2015

Snippet Inline CSS Filter for Mozilla Update

Dulu gue pernah memposting tentang snippet inline CSS filter for mozilla. Kemudian aku melihat artikel svg filters effects · drag & drop codepen.io/jorgeatgu/pen/wBRmBZ! Ternyata ada beberapa efek keren hasil generate menggunakan syntax SVG Filters? Adapun nama efek tersebut adalah turbu map, turbulence, luminance, discrete, table, fematrix dan morpho.
Singkat cerita, AA Koben akan berbagi trik penulisan CSS secara inline di mana meliputi dari efek-efek yg gue sebutkan tadi! Updated for simple hover effects with CSS filters codepen.io/beben-koben/full/ckKzh.

Syntax HTML<img src="LINK-IMAGE" alt="" class="EFFECT BLUR" />Gantikan tulisan EFFECT BLUR dengan nama-nama efek!
Buka satu halaman full artikel jika demo tidak jalan!

Original Image

Inline CSS Filter for Mozilla

Turbu Map Effect

Inline CSS Filter for Mozilla
.turbuMap {
-webkit-filter: url("#turbuMap");
filter: url("#turbuMap");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'turbuMap\'><feTurbulence baseFrequency=\'0.015\' numOctaves=\'2\' type=\'fractalNoise\' result=\'turbulence\' data-filterId=\'3\' /><feDisplacementMap xChannelSelector=\'R\' yChannelSelector=\'G\' in=\'SourceGraphic\' in2=\'turbulence\' scale=\'40\' /></filter></svg>#turbuMap");
}

Turbulence

Inline CSS Filter for Mozilla
.turbulence {
-webkit-filter: url("#turbulence");
filter: url("#turbulence");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'turbulence\'><feTurbulence baseFrequency=\'.7\' numOctaves=\'2\' type=\'turbulence\' result=\'fuzz\' stitchTiles=\'stitch\' /><feComposite in=\'SourceGraphic\' in2=\'fuzz\' operator=\'arithmetic\' k1=\'0\' k2=\'1\' k3=\'-3\' k4=\'.01\' /></filter></svg>#turbulence");
}

Luminance

Inline CSS Filter for Mozilla
.luminance {
-webkit-filter: url("#luminanceToAlpha");
filter: url("#luminanceToAlpha");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'luminanceToAlpha\'><feColorMatrix type='\luminanceToAlpha'\ values='\0.4'\ in=\'SourceGraphic\' /></filter></svg>#luminanceToAlpha");
}

Discrete I

Inline CSS Filter for Mozilla
.discrete {
-webkit-filter: url("#discrete");
filter: url("#discrete");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'discrete\'><feComponentTransfer><feFuncR type=\'discrete\' tableValues=\'0 .5 1 1\' /><feFuncG type=\'discrete\' tableValues=\'0 .5 1\' /><feFuncB type=\'discrete\' tableValues=\'0 .5\' /></feComponentTransfer></filter></svg>#discrete");
}

Discrete II

Inline CSS Filter for Mozilla
.discrete2 {
-webkit-filter: url("#discrete2");
filter: url("#discrete2");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'discrete2\'><feComponentTransfer><feFuncR type=\'discrete\' tableValues=\'0 .5 1 1\' /><feFuncG type=\'discrete\' tableValues=\'0 5 1\' /><feFuncB type=\'discrete\' tableValues=\'0 .5 1 1\' /></feComponentTransfer></filter></svg>#discrete2");
}

Table I

Inline CSS Filter for Mozilla
.table {
-webkit-filter: url("#table");
filter: url("#table");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'table\'><feComponentTransfer><feFuncR type=\'table\' tableValues=\'1 0 1\' exponent=\'5\' /><feFuncG type=\'table\' tableValues=\'1 0 1\' exponent=\'2\' /><feFuncB type=\'table\' tableValues=\'1 0 1\' exponent=\'5\'/></feComponentTransfer></filter></svg>#table");
}

Table II

Inline CSS Filter for Mozilla
.table2 {
-webkit-filter: url("#table2");
filter: url("#table2");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'table2\'><feComponentTransfer><feFuncR type=\'table\' tableValues=\'1 0 1\' exponent=\'5\' /><feFuncG type=\'table\' tableValues=\'1 10 1\' exponent=\'2\' /><feFuncB type=\'table\' tableValues=\'1 5 1\' exponent=\'5\'/></feComponentTransfer></filter></svg>#table2");
}

Fematrix I

Inline CSS Filter for Mozilla
.fematrix {
-webkit-filter: url("#fematrix");
filter: url("#fematrix");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'fematrix\'><feConvolveMatrix order=\'3\' kernelMatrix=\'-1 -1 3 -2 1 -1 -1 1 -1\' /></filter></svg>#fematrix");
}

Fematrix II

Inline CSS Filter for Mozilla
.fematrix2 {
-webkit-filter: url("#fematrix2");
filter: url("#fematrix2");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'fematrix2\'><feConvolveMatrix order=\'4\' kernelMatrix=\'-2 2 1 -1 -1 3 2 1 -1 0 -1 -4 -1 1 0 0\' /></filter></svg>#fematrix2");
}

Morpho I

Inline CSS Filter for Mozilla
.morpho {
-webkit-filter: url("#morpho");
filter: url("#morpho");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'morpho\'><feMorphology operator=\'erode\' radius=\'3\'/></filter></svg>#morpho");
}

Morpho II

Inline CSS Filter for Mozilla
.morpho2 {
-webkit-filter: url("#morpho2");
filter: url("#morpho2");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'morpho2\'><feMorphology operator=\'dilate\' radius=\'3\'/></filter></svg>#morpho2");
}

Capek #:-S

Tidak ada komentar:

Posting Komentar