CSS3 Clouds

CSS3 is powerful stuff — in fact, it’s so powerful, it can render realistic, 3D-like clouds! If you have a CSS3-capable browser, like Firefox, Chrome or Safari,

Navigate through the page, and like the picture you see above, you’ll see the code in action. Using just CSS3 3D Transforms, some Javascript and HTML5 Canvas goodness, Sánchez has created what is a shining example of the possibilities of the open web technologies and what it could be used for, like interactive HTML5 videos, games, or if it will, the possibility of an entirely new paradigm.

Aside from just clouds, the example by Sánchez can be used for many various situations; like explosions, for instance. The smoke, flare and the debris emitted by an explosion is similar as to how clouds transverse in the sky. Also, the way the view rotates around an explosion (Which would obviously last a few seconds) is similar as to how one views clouds in the sky. In the page, a few of these examples are shown. There’s also the option to tweak around with textures, to have a play around with what the example can do. And if you’d like to dig even deeper, there’s a tutorial available, also by Sánchez. He outlines the idea and process behind the creation. Well worth checking out!

Jumpstarting a Design Community

Understand Your Compensation

Designer Monoculture

The State of Design Leadership

The Science of Product Design

Interview with Michael Flarup: Co-Founder and Lead Designer at Robocat

The Importance of Design Conventions