As CSS3 gathers momentum, more and more new techniques and ideas are being published everyday. Each seems to explore creative never seen before avenues, and ALL push CSS boundaries ever further away. It really is an exciting moment for web design.
Here are our favorite CSS3 experimental techniques, And please, please do try this at home, we will really look forward to seeing your results.
This is a recreation example of our solar system using the CSS3 features border-radius, transform and animation.
The orbits and planets have all been built using border-radius, while the animation have been done via –webkit animation properties and transform. The result is amazing!
A couple of years ago, would you have thought that the Star Wars Episode IV opening crawl could be built by using only CSS and HTML? I didn’t either.
This inspirational experiment, built by Guillermo Esteves, only works in recent versions of Safari and WebKit on Mac OS X.
If you do view it in your browser, just be aware that it may not work work, and may even crash your browser. Never mind the warnings, go for it, try the demo!
This article is not only showcasing experimental CSS3, it actually shows you how to do it via a highly detailed and well written tutorial (by Anthony Calzadilla), that walks you through the process of creating a CSS3 animation of an AT-AT Walker from The Empire Strikes Back.
It works in Webkit based browsers (Safari and Chrome) only.
These icons are an amazing and practical example of what can be achieved with CSS3. Built using the new CSS3 properties border-radius, text-shadow, box-shadow and gradients. They are an amazing achievement.