CSS 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 […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

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.

See the Pen Isometric Card Grid by Jon Kantner (@jkantner) on CodePen.1

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.

See the Pen Emoji Train by John Kantner (@jkantner) on CodePen.1

Three.js Planet by Piotr Kalinowski

This one 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.

See the Pen ThreeD Planet by Piotr Kalinowski (@piotrkalinowski) on CodePen.1

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.

See the Pen 3D objects in CSS by Keith Clark (@keithclark) on CodePen.1

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.

See the Pen Star Wars Opening Crawl by Jaume Sanchez (@spite) on CodePen.1

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.

Did this article help you out? Please help us find more time to write useful guides & articles like this by donating a buck or two. It'll keep us coffee-fueled. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *