News

Coding Kung-fu: 35 Graphics Built Purely With CSS3

8 Feb/12

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.

css3 graphics Coding Kung fu: 35 Graphics Built Purely With CSS3

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!

rss feed icon Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple iMac

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

apple imac Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple Keyboard

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

apple keyboard Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple iPhone

Oh, one more thing: iPhoneCSS3.

apple iphone Coding Kung fu: 35 Graphics Built Purely With CSS3

Cherry Blossom

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

cherry blossom Coding Kung fu: 35 Graphics Built Purely With CSS3

Coffee Cup

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

coffee cup Coding Kung fu: 35 Graphics Built Purely With CSS3

Doraemon

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

doraemon Coding Kung fu: 35 Graphics Built Purely With CSS3

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.

meowww Coding Kung fu: 35 Graphics Built Purely With CSS3

Mushroom, Triforce, Pok

Leggi Anche

Condividi
Condividi in DeliciousCondividi in DiggCondividi in RedditCondividi in StumbleCondividi in MixxCondividi in TecnoratiCondividi in Ok Notizie

Commenti

I commenti sono disabilitati per questo articolo.

I commenti sono chiusi.

Autore

Archivio

Iscrizione Newsletter

    Tieniti informato con tutte le novità del mondo informatico con la nostra newsletter
    Email:

    Nome:

    Auto Shop Italia
    Web Burning Blog
    Info Privacy

Meta