News

Coding Kung-fu: 35 Graphics Built Purely With CSS3

Look at the graphics below, awesome Photoshop works right? Nah, they’re created by CSS3. Yes, they’re completely “drawn” by CSS3! When we have seen enough CSS3 animations we thought those are all CSS3 can do as a potential Flash killer, but we’re wrong. Developers perhaps don’t satisfy with the fun of animation, so again, they push the boundaries of CSS3 to challenge the graphic editor’s realm.

With this post comes 35 carefully crafted CSS3 graphics which even include something you wouldn’t relate with CSS3 like Apple iPhone, cartoon character Doraemon, and more surprises! Heck, some of them even come with detailed tutorial that teach you how to achieve it! So don’t miss the great chance to learn to create graphic using CSS3 and little bit of HTML, let’s get naughty with CSS3!

You are strongly recommended to view these demos using the latest version of Safari or Developer version of Google Chrome. Most demos support the latest version of Firefox and Google Chrome, though.

RSS Feed Icon

RSS Feed Icon built with CSS3, exclusively from Hongkiat! Along with the link comes a tutorial which you can actually learn to “draw” the RSS Feed icon without using even a single image. Create the CSS3 miracle with your own hands!

Apple iMac

Yeah my eyes also can’t believe that, but it’s iMac “assembled” purely with CSS3.

Apple Keyboard

It’s Apple Keyboard built with CSS3! Heck, the keyboard buttons can even be pressed.

Apple iPhone

Oh, one more thing: iPhoneCSS3.

Cherry Blossom

The real awesomeness of CSS3 is that it can be used to build anything including plants and animals!

Coffee Cup

A tiring day? Let’s have a CSS3 coffee, best served with Safari/Google Chrome.

Doraemon

This Doraemon is famous for CSS3 compatibility testing. Try it in Internet Explorer 8 or below and have a nice day.

Meowww!

Now you are looking at a cat built completely with code! Too bad the CSS3 can’t generate sound effects, at least for now.

Mushroom, Triforce, Pok