By
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 */
