STRETCHING THE LIMITS OF CSS 3 AMAZING CREATIONS IN PURE CSS
It’s easy to underestimate the power of CSS. For those coming from a CSS 2 background, CSS was a way of styling elements of a page and nothing more. Now, with CSS 3, new properties supported by modern browsers open up new possibilities that you could only dream of before. From element styling to complete animations, much is now possible without resorting to Adobe Flash. This article shows off a number of CSS demos made by different people who have delved deeply into CSS 3 and show their latest cutting-edge techniques. Great stuff to learn CSS 3, and great inspirations too.
CSS 3D Solar System by Julian Garnier
Julian Garnier says he “designs and codes things on the web.” His CSS 3D Solar System demo is heavy on the CSS (1500 lines of it) and makes heavy use of CSS base 64 image embedding. There is a tiny bit of JavaScript that allow you to fiddle with the solar system it shows, but 99% is pure CSS.
Discover how this 3D solar system was built
Mona Lisa in pure CSS by Jay Salvat
This Mona Lisa is described by Jay Salvat as “pointless but fun”. The entire painting was reconstructed (using an automated tool, obviously) using many, many box-shadows CSS elements. Each box-shadow has a blur offset that causes it to overlay the next, giving the entire painting a nice blurry effect. It’s an interesting alternative to using base 64 image embedding.
Pure CSS Progress by Rafael González
This 3D progress bar in pure CSS by Rafael González lets you use CSS classes in your HTML to specify how full the bar is – it’s as easy as that. Plus, it comes in various colors. If you want to animate the progress bar filling up, all you need to do is change the class and apply a CSS transition.
CSS Only iPhone 6 by Fabrizio Bianchi
“The best iPhone 6 feature is its round shape, and finally we can draw it with CSS”, says Fabrizio Bianchi, and goes on to do just that. The phone’s live wallpaper is actually really animated, too. His CSS is only 500 lines, but he does have a fair number of <div> elements in his HTML to make it all possible. The CSS includes no embedded images, so all you see is actually CSS drawing.
Star Wars Opening Crawl by Tim Pietrusky
“I love Star Wars, but I could not find a web version of the original opening crawl from 1977. So I created this one,” says Tim Pietrusky. It needs no further explanations, just click Start already. The music, incidentally, is not CSS but included in the HTML as .ogg files. Keyframe animation is used for the text, so dive into the code to see how to use it.
Inspired yet? With its transitions, image embedding and keyframe animations, CSS 3 can do a lot. All it requires is some tricks, and that’s why it’s a good idea to walk through the code of the examples above.