Tangled in Design Branding Decoration

Tangled in Design is the work of Stephen Greig, currently a Web Designer/Front-end guy in Nottingham, UK.

Read more about Stephen

I wrote a book on advanced CSS3, published by John Wiley & Sons. You should totally buy it…

Buy my book: CSS3 Pushing the Limits

Tangled in Design is the work of Stephen Greig, currently a Freelance Web Designer/Front-end guy in Nottingham, UK.

Stephen specialises in design and front-end development, notably HTML5 & semantics, scalable CSS, along with particular expertise in the experimental, cutting edge CSS3 modules.

Stephen's been in the industry as a full-time professional for over 5 years, during which he has graduated with a First Class BA Honours degree, written a 380 page book on advanced CSS3 and held Senior positions in both New Zealand and South Wales.

He has since moved back to his home in Nottingham where he now works as a Senior Web Designer.

Stephen loves sports and is a keen follower of Hereford FC as well as the Welsh Rugby Union and Football teams.

He also has a deep passion for music and boasts an extremely varied taste, as is evident by his last.fm profile.

He also likes swearing and thinks that talking in third person is cool as fuck.

Want to know more? Tweet me. I'm nice.

Slide Back

Using CSS3 Filters to Enhance your Transitions

Tweet

featuredCSS3 Filters are a pretty exciting prospect for us Web Designers as they make effects that we typically associate with Photoshop, possible to apply in the browser with ease. Assuming across-the-board support eventually arrives, we can wave goodbye to countless annoying sprites for simple hover effects and instead, replace this tedious process with a single line of simple CSS.

The basic filters as listed in the W3C Draft are as follows: grayscale, sepia, saturate, hue-rotate, invert, opacity, brightness, contrast,blur, drop-shadow, custom.

Basic CSS3 Filters

View DemoView CSS

We can combine these filters together and use them with other CSS3 properties like transform and animate to create even more interesting transitions.

Combining CSS3 Filters

View DemoView CSS

Support

Support is very limited at the time of writing, with Chrome currently the only browser with support for CSS3 filters, so anything other than experimental usage should be done with caution.

CSS3 Filters Browser Support
Having said that, with Chrome recently surpassing IE as the world’s most used browser, you can be confident that a sizeable chunk of your audience will see the benefits of your CSS3 filters if you do decide to experiment with them.

As with most of the new CSS3 properties, as long as we use them with caution to enhance the user experience and not to compromise the functionality of the site, you can feel free to use them right now.

Using CSS3 Filters to Enhance your Image Galleries

We’re going to take a look at how we can use these new filters to improve the UX for a simple image gallery.

Grayscale

Grayscale is a very basic effect that I think we would see a lot more of if we could achieve it with a single line of CSS rather than having to use a sprite image.

Grayscale CSS3 Filter

The Code
img {
    -webkit-filter:grayscale(1);
}

img:hover {
    -webkit-filter:grayscale(0);
}

As simple as that! Just one line needed to apply the filter; in this case, grayscale uses a scale of 0-1 to specify the strength of the filter. The above code applies a full grayscale effect to the image and restores the image’s full colour on hover. The demo uses a simple CSS3 transition effect to complete the effect.

Saturate

Saturate CSS3 Filter

The Code
img {
    -webkit-filter:saturate(4);
}

img:hover {
    -webkit-filter:saturate(1);
}

The saturate filter has a starting value of 1, below which it de-saturates, creating a grayscale effect and above which it starts to saturate the colours in the image. The above demo strongly over-saturates the images to make the hover effect stronger.

Sepia

Sepia CSS3 Filter

The Code
img {
    -webkit-filter:sepia(1);
}

img:hover {
    -webkit-filter:sepia(0);
}

The above code applies the classic sepia filter, which operates on a scale of 0-1 to determine its strength, similarly to the grayscale filter.

Hue Rotate

Hue Rotate CSS3 Filter

The Code
img:hover {
    -webkit-filter:hue-rotate(360deg);
}

Colour Wheel The hue-rotate filter is applied a little differently to the others as it is specified in degrees. This may seem strange at first, but when you picture a colour wheel, it soon becomes easy enough to visualise the hue value in terms of its position in a circle. The above code (when used with a transition) simply sends the hue value all the way round the colour wheel on hover. The best way to understand this effect is to take a look at the demo above.

Invert

Invert CSS3 Filter

The Code
img {
    -webkit-filter:invert(1);
}

img:hover {
    -webkit-filter:invert(0);
}

The invert filter isn’t the most aesthetically pleasing in its basic usage, but it could be useful when combined with other filters or with black and white images.

Brightness

Brightness CSS3 Filter

The Code
img {
    -webkit-filter:brightness(-0.5);
}

img:hover {
    -webkit-filter:brightness(0);
}

The brightness filter can be effective at making certain elements on a page stand out amongst their surroundings. A value of 1 is equivalent to 100% brightness (white) whereas -1 is complete darkness. In the example above, we’ve used a negative value to darken the gallery images, allowing the hovered image to stand out even more.

Contrast

Contrast CSS3 Filter

The Code
img {
    -webkit-filter:contrast(0.3);
}

img:hover {
    -webkit-filter:contrast(1);
}

The contrast filter uses the value 1 to specify a neutral contrast, with the effect increasing or decreasing along with this value. In the above example, we’ve used a low value to ceate a low-contrast effect in order to make the hover effect stronger.

Blur

Blur CSS3 Filter

The Code
img {
    -webkit-filter:blur(2px);
}

img:hover {
    -webkit-filter:blur(0);
}

The blur filter is defined differently to the other filters as it uses pixel units to determine the strength of the blur, with 0 as its base value.

Combining CSS3 Filters to Enhance your Image Galleries

If we use our imaginations we can create any number of impressive techniques by using the various filters together and by combining filters with other CSS3 properties like transform and animate.

Here are just a few examples…

Hue-rotate and Animate

CSS3 Filter CSS3 Animation

The Code
@-webkit-keyframes hue { 
    100% { -webkit-filter:hue-rotate(360deg); }  
}

img:hover {
    -webkit-animation:hue 1s linear infinite;
}

This example combines the hue-rotate filter with CSS3 animation to send the hovered image on an infinite loop around the colour wheel.

Blur, Grayscale and Transform (Scale)

Blur, Grayscale and Transform (Scale)

The Code
img { 
    -webkit-filter:grayscale(1) blur(2px); 
}

img:hover {
    -webkit-transform:scale(1.3);
    -webkit-filter:grayscale(0) blur(0);
}

In the example above, we’ve brought in the transform property to give our hovered image a bit more emphasis. The blur filter also helps focus our attention on the un-blurred, hovered image.

Sepia, Brightness and Opacity

Sepia, Brightness and Opacity

The Code
img { 
    -webkit-filter:sepia(1) brightness(-0.2) opacity(0.6);
}

img:hover {
    -webkit-filter:sepia(0) brightness(0) opacity(1);
}

The above combination of filters help to create a nice, subtle and understated gallery.

Grayscale and Brightness

Grayscale and Brightness

The Code
img { 
    -webkit-filter:grayscale(1) brightness(-0.4);
}

img:hover {
    -webkit-filter:grayscale(0) brightness(0);
}

Again, the grayscale and brightness filters really help to bring out the hovered image and focus our full attention on it.

Conclusion

So there we have it, another taste of the sheer power of CSS3 and what can be achieved with it.

Just remember what we said earlier; consider how you’re using these filters. Are they detrimental to the functionality of your site or are they simply enhancing the appearance of existing functions?

Progressive enhancement is the way forward and as long as you’re applying this technique, I see no reason why you can’t treat your Chrome users to some CSS3 filters right now. Proceed with caution.

About Stephen Greig

Stephen Greig is a 25 year old Freelance Web Designer/Front-end guy, currently living in Nottingham, UK. Stephen is also the creator of messivsronaldo.net and author of CSS3 Pushing the Limits, a book on advanced CSS3. You should follow him on Twitter where he talks about the web, sports, music and swears a lot. Stephen's also on Google+ if that's more your bag.