Coding Kung-fu: 35 Graphics Built Purely With CSS3

By . Filed in Web Design

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

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

Apple iMac

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

apple imac

Apple Keyboard

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

apple keyboard

Apple iPhone

Oh, one more thing: iPhoneCSS3.

apple iphone

Cherry Blossom

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

cherry blossom

Coffee Cup

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

coffee cup

Doraemon

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

doraemon

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

Mushroom, Triforce, Poké ball, Kirby

“Being a nerd, I’ve made some nerdy creations – a Mario mushroom, the Triforce, a Pokéball, and Kirby. For those that use dinosaur browsers, there’s a screenshot of what it’s supposed to look like.”

mushroom, triforce, pokeball, kirby

Nyan Cat

“It contains 81 DOM elements, 688 lines of pure CSS and one JavaScript function for
looping audio. My CSS fails CSSLint test and I’m really proud of this.”

nyan cat

Patterns

The CSS3 is so great that it can also be used to build fundamental asset for web design, such as these patterns.

patterns

BonBon

BonBon are sweet CSS3 buttons created with a goal in mind: sexy looking, really flexible buttons with the most minimalistic markup as possible.

bonbon button

iOS Icons

Amazing? Yes. These icons are built by rounded corners, shadows, gradients, rgba, pseudo-elements, and transforms, with the help of certain tools such as westciv’s tools and Border Radius.

ios icons

Social Media Icons

That’s impossible for web developer to not build social media icons if they can build iPhone and Doraemon with CSS3. And they built these icons really well.

social media icons

Social Media Icons

Another set of social media icons that show the possibilities of the CSS3 in creating usable icons.

social media icons

Peculiar

“Peculiar is a free icon package made only in CSS. It was created for sites and web applications that depend on fewer HTTP requests as possible or don’t need to use any image at all.”

peculiar

GUI Icons

84 simple GUI icons using just CSS and semantic HTML. This is still considered as “non-production ready” icons, but they look very promising.

gui-icons

Steve Jobs

Steve Jobs is not only the icon of the digital age, but also the leader who greatly promotes HTML5.

steve jobs

Twitter Fail Whale

The Twitter fail whale will not fail to surprise you, except in Internet Explorer 8 or below.

twitter fail whale

umbrUI

User Interface elements made possible with CSS3, and it looks really sleek!

umbrui

Adobe Photoshop Logo

A tribute to Photoshop without using Photoshop.

adobe photoshop logo

Android Logo

The Android is made of fairly simple shapes, but it explains the advantage of CSS3: you can make simple stuff and modify it any way you want by using just code but not Photoshop.

android logo

Apple Logo

Retro Apple logo presented using CSS3, still as awesome as the time it was created.

apple logo

Atari Logo

Years before, who would have thought the Atari logo will be re-created using CSS3.

atari logo

BP Logo

Simple logo can be made easily with CSS3. The best thing with some of these logos showcased here are there are code provided for you to try out!

bp logo

Dribbble Logo

Famous user-powered showcase site Dribbble’s logo showcased using CSS3.

dribbble logo

Magento Logo

Magento’s logo is not too hard to draw but the outcome looks professional.

magento logo

McDonald Logo

I’m lovin’ CSS3!

mcdonald logo

Twitter Bird

Perfect proportion, hat tip to the creator.

twitter bird

Windows Logo

Windows logo! Looks really awesome, and it’s easy to create!

windows logo

Internet Explorer Logo

Really great creation! It works in major browsers except Internet Explorer 8 or below.

internet explorer logo

Google Chrome Logo

I’m not sure you love the new logo of Google Chrome or not, but this CSS3 Google Chrome logo looks awesome!

google chrome logo

Opera Logo

Now a practice for you: what are the differences between this CSS3 piece and the real deal?

opera logo

HTML5 Logo

HTML5 can’t shine without CSS3!

html5 logo

Volkswagen Logo

Except the color scheme, this CSS3 clone looks identical to the original one.

volkswagen logo

Reflection

With the boom of the logos and graphics made of pure CSS3 come the discussions which greatly debate about the usability of the CSS3-produced graphics in the real world production environment.

Generally the CSS3 graphic is fine, but it might get annoying especially when you need to alter the design or simply resize the graphic, also the biggest pain here is the technology is not yet fully supported by certain browsers like Internet Explorer.

What do you think? Will you use the graphic made with CSS3 in your site? Do you have any solution for its current drawbacks? Let us know your thought, and do share with us if you just baked a CSS3 graphic!

More

Willing to actually do something with CSS3? You’ve come to the right place! Below are guides and tutorials written to aid you greatly on your road to mastering the CSS3.

Author:

Alvaris is a web designer, developer and staff writer for Hongkiat.com.

Tags:

Advertisement