Without question CSS revolutionised the way web pages are built, disposing of ugly and bloated table layout in favour of a more semantic, light weight solution. It’s only in recent years however that webmasters have truly been able to harness its power due to lack of support from mainstream browsers (naming no names IE6). Thankfully these older browsers are now less commonplace than they once were, allowing developers to create websites for modern platforms.
With the creation of CSS3 comes an extraordinary amount of cool features. Some of these features will substitute Photoshop for graphics and jQuery for animation.
Here is a rundown of my favourite CSS3 features:
- Rounded corners – creating a containing element with rounded corners in CSS2 was an absolute pain. You would have to create all the images and painfully align them using nested divs. Now with CSS3’s “border-radius” property you simply assign a value to get rounded corners! Easy! Unfortunately this is still unsupported by the Internet Explorer family so be sure to use this feature only on sites with a dominating Safari/Firefox browser usage.
- Drop shadow – This is create for creating text with drop shadows. Used effectively this can really add another dimension to your design. You can even add multiple drop shadows, change the colour and alignment to create glowing text and stroke effects. This is one to be used sparingly as too much will be overkill.
- Animation – That’s right; you can actually apply animation to elements to make them spin, zoom and pan. I’ve only seen one example of this and I’m unsure of its support but this could revolutionise web animation if done correctly. Hopefully this will see off Flash – which has been a pain in my backside for years!
- Multiple backgrounds – thanks to CSS3 it’s now also possible to add multiple backgrounds to a single div element. This is great and disposes of the need for nested divs which we once struggled with.
The future is bright for the web and with more browsers supporting these standards, a lot more is becoming possible. Personally I’m looking forward to being able to experiment with some of these new features, in particular the animation property as I think this could pave the way for some really unique and interesting results.
Keeping abreast of CSS3 is easy with plenty of support and informational sites out there so if you’re still a table-based web designer, there has never been a better time to jump into CSS.