CSS3 and SVG Image Filters
Demo
CSS3 and SVG Filters (Support as of September 2014: Firefox and Chrome)
SVG Only (Support as of September 2014: Firefox)
Usage and Code Insight
<h4>CSS3 and SVG Filters (Support as of September 2014: Firefox and Chrome)</h4>
<figure>
<img class="acidjs-img-filter" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Original Image</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-oversaturated" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Oversaturated</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-hypersaturated" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Hypersaturated</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-blur" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Blur</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-grayscale" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Grayscale</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-inverse" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Inverse</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-sepia" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Sepia</figcaption>
</figure>
<h4>SVG Only (Support as of September 2014: Firefox)</h4>
<figure>
<img class="acidjs-img-filter" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Original Image</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-ultrared" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Ultrared (SVG only)</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-discrete" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Discrete (SVG only)</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-hicontrast" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Hicontrast (SVG only)</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-yellow" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Yellow (SVG only)</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-blue" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Blue (SVG only)</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-red" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Red (SVG only)</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-green" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Green (SVG only)</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-purple" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Purple (SVG only)</figcaption>
</figure>
<figure>
<img class="acidjs-img-filter acidjs-img-filter-pink" src="pages/css3-and-svg-image-filters/images/mountains.jpg" />
<figcaption>Pink (SVG only)</figcaption>
</figure>
/*
* CSS3 and SVG Image Filters by Martin Ivanov (@wemakesitesnet)
* More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
* @author Martin Ivanov
* @url developer website: http://wemakesites.net/
* @url developer twitter: https://twitter.com/#!/wemakesitesnet
* @url developer blog http://acidmartin.wordpress.com/
**/
/*
* Do you like this solution? Please, donate:
* https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
**/
.acidjs-img-filter
{
display: inline-block;
vertical-align: middle;
}
/* CSS3 and SVG filters */
.acidjs-img-filter.acidjs-img-filter-grayscale
{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#grayscale");
}
.acidjs-img-filter.acidjs-img-filter-blur
{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#blur");
}
.acidjs-img-filter.acidjs-img-filter-sepia
{
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
filter: sepia(100%);
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#sepia");
}
.acidjs-img-filter.acidjs-img-filter-inverse
{
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
filter: invert(100%);
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#inverse");
}
.acidjs-img-filter.acidjs-img-filter-hypersaturated
{
-webkit-filter: saturate(300%);
-moz-filter: saturate(300%);
filter: saturate(300%);
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#hypersaturated");
}
.acidjs-img-filter.acidjs-img-filter-oversaturated
{
-webkit-filter: saturate(250%);
-moz-filter: saturate(250%);
filter: saturate(250%);
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#oversaturated");
}
/* SVG filters only */
.acidjs-img-filter.acidjs-img-filter-discrete
{
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#discrete");
}
.acidjs-img-filter.acidjs-img-filter-ultrared
{
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#ultrared");
}
.acidjs-img-filter.acidjs-img-filter-hicontrast
{
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#hicontrast");
}
.acidjs-img-filter.acidjs-img-filter-yellow
{
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#yellow");
}
.acidjs-img-filter.acidjs-img-filter-red
{
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#red");
}
.acidjs-img-filter.acidjs-img-filter-blue
{
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#blue");
}
.acidjs-img-filter.acidjs-img-filter-green
{
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#green");
}
.acidjs-img-filter.acidjs-img-filter-purple
{
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#purple");
}
.acidjs-img-filter.acidjs-img-filter-pink
{
filter: url("../pages/css3-and-svg-image-filters/example/filters.svg#pink");
} <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="inverse">
<fecomponenttransfer>
<fefuncr type="table" tablevalues="1 0"/>
<fefuncg type="table" tablevalues="1 0"/>
<fefuncb type="table" tablevalues="1 0"/>
</fecomponenttransfer>
</filter>
<filter id="sepia"><fecolormatrix values="0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0" /></filter>
<filter id="blur"><fegaussianblur stddeviation="5" /></filter>
<filter id="grayscale">
<fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
</filter>
<filter id="sepia">
<fecolormatrix values="0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0" />
</filter>
<filter id="hypersaturated">
<fecolormatrix type="matrix" values="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0 0 0 0 1 0"/>
</filter>
<filter id="oversaturated">
<fecolormatrix type="matrix" values="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0 0 0 0 1 0"/>
</filter>
<filter id="discrete">
<fegaussianblur stddeviation="1.5" />
<fecomponenttransfer>
<fefuncr type="discrete" tablevalues="0 .5 1 1"/>
<fefuncg type="discrete" tablevalues="0 .5 1"/>
<fefuncb type="discrete" tablevalues="0"/>
</fecomponenttransfer>
</filter>
<filter id="ultrared">
<fecolormatrix type="matrix" values="-1 3 3 0 -.5 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
</filter>
<filter id="hicontrast">
<fecolormatrix type="matrix" values="-1 0 0 0 0 0 -1 0 0 0 0 0 -1 0 0 1 1 1 0 0 "/>
</filter>
<filter id="yellow" x="0%" y="0%" width="100%" height="100%">
<feflood flood-color="yellow" result="A"/>
<fecolormatrix type="matrix" in="SourceGraphic" result="B" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 1 1 0 0"/>
<femerge>
<femergenode in="A"/>
<femergenode in="B"/>
</femerge>
</filter>
<filter id="red" x="0%" y="0%" width="100%" height="100%">
<feflood flood-color="red" result="A"/>
<fecolormatrix type="matrix" in="SourceGraphic" result="B" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 1 1 0 0"/>
<femerge>
<femergenode in="A"/>
<femergenode in="B"/>
</femerge>
</filter>
<filter id="blue" x="0%" y="0%" width="100%" height="100%">
<feflood flood-color="blue" result="A"/>
<fecolormatrix type="matrix" in="SourceGraphic" result="B" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 1 1 0 0"/>
<femerge>
<femergenode in="A"/>
<femergenode in="B"/>
</femerge>
</filter>
<filter id="green" x="0%" y="0%" width="100%" height="100%">
<feflood flood-color="green" result="A"/>
<fecolormatrix type="matrix" in="SourceGraphic" result="B" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 1 1 0 0"/>
<femerge>
<femergenode in="A"/>
<femergenode in="B"/>
</femerge>
</filter>
<filter id="purple" x="0%" y="0%" width="100%" height="100%">
<feflood flood-color="purple" result="A"/>
<fecolormatrix type="matrix" in="SourceGraphic" result="B" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 1 1 0 0"/>
<femerge>
<femergenode in="A"/>
<femergenode in="B"/>
</femerge>
</filter>
<filter id="pink" x="0%" y="0%" width="100%" height="100%">
<feflood flood-color="pink" result="A"/>
<fecolormatrix type="matrix" in="SourceGraphic" result="B" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 1 1 0 0"/>
<femerge>
<femergenode in="A"/>
<femergenode in="B"/>
</femerge>
</filter>
</svg>