LET'S GEEK

CSS3 is making its way into modern browsers with rapid steps and it seems like web designers can’t get enough of it. Even though most users browsers lack support for CSS3 web designers are testing the limits of their new mark up. Here are 6 awesome examples of pure CSS3 Graphics.

Monster

Author: Sebastien Plaignaud

This little green monster is darn impressive. This is probably all you need to understand what CSS3 is capable of. Makes you think of CSS3 as a image editor substitute. The author made a tutorial (in french) on how to do this.

Demo: http://web.virtuousquare.fr/wp-content/themes/default/css_monsters/dragon/dragon.html

Fail Whale

Author: Subcide

If you’re a twitterer you might recognize the whale in the picture as the infamous fail whale. It is shown whenever Twitter is experiencing too much load.

Demo: Fail Whale

Opera logo

Author: David Desandro

Now, as an image, this might not be all to spectacular. But remember, this is 100% CSS3. All bends and shadows are news in CSS3.

Demo: http://desandro.com/articles/opera-logo-css/

Animated Solar System

Author: Alex Girón

Being a astronomy nerd I find this experiment particular exiting. It uses border-radius, transforms and animations to show the solar system. Check it out! (Chrome or Safari needed for full support)

Demo: http://neography.com/experiment/circles/solarsystem/

Stereoscopic 3D effect

Author: Simurai

Even though this example might be a better example of artistic innovation it’s definitely impressive enough to be mentioned. I can’t wait to see how people will use this in the future. Perhaps it’s time to order 3d-glasses?

Demo: http://lab.simurai.com/css/css3d/

Droplet

Author: Sean Martell

Again, this might not be all that if it were an image. But it definitely is as a product of pure CSS3. Perhaps CSS3 will be used as a way of decreasing server load by letting users render images through CSS instead of sending images.

Demo: http://mozilla.seanmartell.com/raindrop/