Innovative CSS3 Experiments & Resources

This post presents a selection of the latest and greatest, highly innovative CSS3 experiments and resources.

Many front-end designers are already having a play around with some of the new and exciting CSS3 features. While lots of the current spec can, and should, be used now, many of the super-cool features are reliant on modern and up-to-date browsers.

The ability to utilise animation is one of the most exciting and ground-breaking additions to the CSS spec, but has limited support. For this reason, things like CSS Transforms shouldn’t be relied upon for production sites just yet, unless it’s guaranteed the target audience will be using browsers such as the latest versions of Safari or Chrome. Of course there is nothing to stop anyone using progressive enhancement to spice up their websites with a sprinkling of nifty CSS3 magic :)

The good news is that CSS transforms are already a firm fixture in current Webkit browsers, with Firefox 4 (and hopefully IE9 ) adding support in the not to distant future.

In the meantime, the more daring amongst us could use jQuery to get IE to rotate, skew, and scale elements – have a look at Transformie.

The following experiments I have selected are seriously cool and a glimpse towards the future of front-end web development. I hope you enjoy them and they offer some inspiration!

BonBon Buttons

These gorgeous buttons are built completely with CSS3 – with the exception of the subtle noise texture which is a PNG graphic. While it isn’t recommend using these for production sites, various classes have been included to make it really easy to change some of the details. Overall this is a really impressive experiment, with lickable results ;)
http://lab.simurai.com/css/buttons/

Morphing Cubes

This impressive demo morphs between two spinning nested cubes, to a spinning circle. A function is available which enables transparency to be toggled on-and-off. This experiment makes extensive use of 3D transforms, animations and transitions – which are all only currently supported by Webkit browsers.
http://webkit.org/blog-files/3d-transforms/morphing-cubes.html

iTwitty the Fool

iTwitty The Fool is a very well animated CSS3 experiment featuring a cartoon B.A., a Twitter feed, and a Twitter bird. Details like the changing facial expression and the manipulated Twitter feed make this a winner. http://www.anthonycalzadilla.com/i-twitty-the-fool/

Apple Keyboard

Although this is simply an Apple keyboard rendered using CSS3, it is still noteworthy for it’s accuracy and detail. http://www.chrismdesign.com/css-keyboard/

Animated Fail Whale

One of my favourites here, the infamous Twitter ‘Fail Whale’ built and animated using CSS3 techniques. It would be nice to see this replace the current Twitter error page – it’s actually quite relaxing to watch! http://www.subcide.com/experiments/fail-whale/

iPhone Icons

These iPhone app icons, made from pure CSS3, are an amazing achievement. The author provides some info on how the effects were achieved here
http://graphicpeel.com/cssiosicons

CSS3 Eternal Zoom

This demo uses webkit keyframes to animate 26 images which result in a stunning continuous zoom effect. http://www.cssplay.co.uk/menu/css3-zoom.html

Flashlight

A mixture of transforms and transitions are used here to create a nice beam of light rollover effect. http://lab.simurai.com/css/flashlight/

Rainbow

An elegant design created with CSS3 proving you can do all kinds of creative things with just pure code. http://media.smashingmagazine.com/css3-rainbow-template/

HTML5 Readiness

Not only is this an prime example of creative CSS3 use, but this is actually a really useful infographic showing the readiness of HTML5 and CSS3. Try using the scroll wheel to change the overall size! You can also step back in time to instantly see the increased browser support. http://html5readiness.com/

Resources

CSS3 Information

http://www.css3.info/ – Everything you need to know about CSS3
http://webkit.org/ – Keep up-to-date with the latest from the Webkit team
http://www.w3.org/TR/css3-roadmap/ – The official W3C CSS3 roadmap
http://www.storiesinflight.com/html5/ – Useful HTML5 / CSS3 Cheatsheet

Useful CSS3 Frameworks

http://lesscss.org/ – LESS extends CSS with variables.
http://sass-lang.com/ – SAAS is an extension of CSS3
http://turbine.peterkroener.de/ – PHP-powered tools for CSS development