Recently I’ve been messing with the cool new features of CSS3 for a client project and I was inspired to see what sort of interface features could be done with it.
The nice things, like drop shadows, gradient background and curved corners, make things look great without having to reach to the image editor, but are hardly revolutionary. Any design that is well planned could already make use of these things and they’ve been around on the web for ages, though CSS3 certainly makes them far easier to implement.
What really got my attention were transitions.
For those that don’t know, CSS3 transitions allow a browser to animate between two CSS states. So, instead of the usual jump to a different colour on hover, there can be a smooth transition.
I’ll put in an example below, but bear in mind that you’ll need a recent version of the good browsers to get this to work. This means no IE at all and Chrome 12, Safari 5, Firefox 5 or Opera 10. More on this later.
The first button below is a simple anchor tag, anchored to nothing so no need to click on it. It has styles applied to it as follows:
Hover over me
So far so obvious. The new CSS3 rules need to be repeated for all the supporting browsers. It’s a pain, but we’ve seen it before with border-radius, so fair enough. The standard hasn’t been ratified officially yet. The button, predictably, changes colour when you roll over it, and even has a nice green drop shadow to show a little bit of CSS3 charm.
But now for the fun part. Transitions can allow the browser to animate those changes. And the best bit is, rather than having to fall back to something like jQuery to do all the fancy animated effects, it’s a one liner, right in the style sheet!
This next button has the same style applied, but I’ve added another class to it which contains the following code:
Hover over me NOW!
But consider this. Any CSS property is handled the same. ANY CSS PROPERTY.
This means, if I have an absolutely positioned block element, and change it’s left property, instead of the sudden, jumpy move, it transitions over the time specified. Now, animated elements are within reach of a single line of code!
box-shadow so what’s stopping you just changing a load of things by just changing the class of the element?
The simplest way to achieve these amazing effects is the way people have been making dynamic formatting changes for ages. Or at least I have. By changing the CSS class on an element, everything that has changed is animated by the transition.
To see a simple application of this, I’ve put together a Demo Page which shows how an image gallery could be put together, or a corporate employees list for your website. All the content there is static but could just as easily come from an AJAX call. I’d encourage you to have a look at the source and see that where I should have a load of jQuery calls to do complicated animation with timings, there are just the usual class and style changes, the transitions are handling all the animation automatically!
I love these new transition effects, but there is an obvious problem and that is browser support. As I said above, you need a new version of the good browsers. This excludes IE straight away, but that’s nothing new. If you’re planning on creating some amazing web app, these transitions could save you a load of time, but not yet. Browser support is not yet there, and if Microsoft are having a hard time getting rid of IE6, you can imagine how long we’ll need to cater for a majority browser that doesn’t support any of the new features of the modern web.
So, the web could be, thanks to these new CSS3 features, a rich and vibrant place, but Microsoft will make sure we have to cater to the lowest common denominator for years to come and they will continue to hold have the pace of development of modern web technologies.
Remember kids, have fun out there, but watch out for IE.