News

How to apply CSS and SVG filters to images

Inspired by Ondo’s distinctive look, we demonstrate how filters can be used to change how your elements are rendered in the browser

cssfilter950

cssfilter950

DOWNLOAD TUTORIAL FILES

Six of the best

CSS3 filters are shorthand derivations of SVG filters and not yet fully supported. Wholly compatible with Safari and Chrome, you can still use SVG equivalents to serve the same effects in Firefox and IE. Either method offers a progressive hint towards how image elements particularly can be dramatically reprocessed inside the browser. Here we’ll look at six across a single JPEG image.

Repeating grid of images

We start from a 602 x 430 JPEG named ‘image.jpg’, placed in the root of a new HTML page. For illustration purposes here we’ll repeat it six times in a grid across the page, attaching a CSS class for each containing a different filter. The <div> container elements are purely for layout, although it’s worth noting you can apply filters to these instead.

001    <body>
002    <div id=”container”>
003    <div id=”frame”>
004    <img class=”one” src=”image.jpg”/></div>
005    <div id=”frame”>
006    <img class=”two” src=”image.jpg”/></div>
007    <div id=”frame”>
008    <img class=”three” src=”image.jpg”/></div>
009    </div>
010    <!-- Double up for six -->
011    </body>

Grayscale and sepia

The grayscale() and sepia() filters work from a percentage, ranging from no effect (0%) up to maximum (100%). Both apply an instant retro tint to full-colour images without any pre-processing in Photoshop, with the browser handling the change. Notice we’ve listed vendor prefixes in the first CSS class, however those for WebKit and moz are redundant, given the current lack of support from both browsers.

001    .one {
002    -webkit-filter: grayscale(100%);
003        -moz-filter: grayscale(100%);
004    -ms-filter: grayscale(100%);
005    -o-filter: grayscale(100%);
006    filter: grayscale(100%);
007    }
008    .two {
009    -webkit-filter: sepia(100%);
010    -o-filter: sepia(100%);
011    filter: sepia(100%);
012    }

Saturation and hue

The saturate() filter boosts colours and makes them appear hotter or electric. Pushed to extremes you can quickly make images look artificial, almost printed. This is based on an integer value, with the effect more extreme as the value is increased. Hue-rotate() sends the colours around a hypothetical colour wheel based on an angle (deg) value.

001    .three {
002    -webkit-filter: saturate(20);
003    -o-filter: saturate(20);
004    filter: saturate(20);
005    }
006    .four {
007    -webkit-filter: hue-rotate(72deg);
008    -o-filter: hue-rotate(72deg);
009    filter: hue-rotate(72deg);
010    }

Invert and blur

The invert() filter is akin to the ‘negative’ type of look found on Ondo’s lead page. Image colours are flipped or reversed again based on a percentage value, with 100% an extreme. Blur() differs from the rest as it goes a long way to obliterate the element. The Gaussian effect applied is strong and using just a small pixel value goes a long way. Remember too that filters can be chained to combine effects!

001    .five {
002        -webkit-filter: invert(90%);
003        -o-filter: invert(90%);
004        filter: invert(90%);
005    }
006    .six {
007        -webkit-filter: blur(7px);
008        -o-filter: blur(7px);
009        filter: blur(7px);
010    }

Doing it the SVG way

Thankfully Firefox and IE do support the filter:url(); property, which can be used instead to point to an SVG file. So the CSS points to the SVG filename followed by a unique <filter> id, which as below uses the feGaussianBlur filter and a stdDeviation value to set a blur. Consult the supplied project code for the full listing, including grayscale, invert and sepia methods using SVG – see if you can use the technique to emulate the previous CSS versions!

001    SVG:
002    <filter id=”blur”>
003        <feGaussianBlur in=”SourceGraphic”
stdDeviation=”4”/>
004    </filter>
005    CSS:
006    filter: url(myFilters.svg#blur);
007    /* CSS3 filters would then follow 
below */ 
×