CSS 3 OVERDRIVE AMAZING CREATIONS IN CSS
It’s easy to underestimate the power of CSS, as we’ve shown you before. There are still developers who think of CSS as merely a way of positioning and styling elements on a web page, but the possibilities are nigh endless, especially with the new features that CSS 3 offers. Take a look at the following demos created by people who have delved deeply into CSS 3 and show their latest cutting-edge techniques. Get inspired, and learn much about CSS 3 in the bargain.
It’s easy to underestimate the power of CSS, as we’ve shown you before. There are still developers who think of CSS as merely a way of positioning and styling elements on a web page, but the possibilities are nigh endless, especially with the new features that CSS 3 offers. Take a look at the following demos created by people who have delved deeply into CSS 3 and show their latest cutting-edge techniques. Get inspired, and learn much about CSS 3 in the bargain.
CSS Isometric Card Grid by John Kartner
John Kartner likes using CSS 3 to produce 3D isometric visualizations, from the business-oriented to the playful. Here is one way of showing company website contact information in the form of 3D-isometric business cards. Note also the use of Pug to generate the HTML.
Animated Emoji Train in pure CSS by John Kartner
More of John Kantner’s 3D isometric visualizations. He’s managed to create a tiny animated 3D environment in pure CSS, with a small train riding on a track. Not a line of JavaScript in sight.
Three.js Planet by Piotr Kalinowski
Piotr Kalinowski’s creation isn’t so much about the CSS, but it shows how hardly a screenful of JavaScript can produce an impressive animation using the Three.js library.
3D objects in CSS by Keith Clark
Keith Clark has been experimenting with using CSS 3 to develop actual first-person shooters. His experiments indicate that all the CSS transformations required a a bit heavy on the browser, but he does show that it’s actually possible to build it. Here’s a demo featuring a rotating, textured barrel.
Clouds using CSS transforms by Jaume Sanchez
You can go far using some CSS transforms and a bunch of transparent PNGs, as illustrated by Jaume Sanchez in his implementation of clouds that rotate as you move the mouse. It’s really just billboards as you would see in older 3D driving games, but it’s a technique that isn’t explored much yet in CSS.
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. We will soon publish a number of guides about CSS 3 animation.