HTML5, CSS3 & JS Experiments

By Martin Ivanov

CSS3 and SVG Image Filters

Demo

CSS3 and SVG Filters (Support as of September 2014: Firefox and Chrome)

Original Image
Oversaturated
Hypersaturated
Blur
Grayscale
Inverse
Sepia

SVG Only (Support as of September 2014: Firefox)

Original Image
Ultrared (SVG only)
Discrete (SVG only)
Hicontrast (SVG only)
Yellow (SVG only)
Blue (SVG only)
Red (SVG only)
Green (SVG only)
Purple (SVG only)
Pink (SVG only)

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>

The gradient-to-white.svg File