Coding Kung-fu: 35 Graphics Built Purely With CSS3 - Hongkiat

Look at the graphics below, awesome Photoshop works, right? Nah, they were created by CSS3. Yes, they’re completely “drawn” by CSS3! When we had seen enough CSS3 animations, we thought those were 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 a detailed tutorials that teaches you how to achieve it! So don’t miss the great chance to learn to create graphics using CSS3 and a 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 in 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 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é 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.”

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.”

Patterns

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

BonBon

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

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.

Social Media Icons

Another set of social media icons that show the possibilities of the CSS3 in creating usable 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.”

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.

Steve Jobs

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

Twitter Fail Whale

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

umbrUI

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

Adobe Photoshop Logo

A tribute to Photoshop without using Photoshop.

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.

Apple Logo

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

Atari Logo

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

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!

Dribbble Logo

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

Magento Logo

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

McDonald Logo

I’m lovin’ CSS3!

Twitter Bird

Perfect proportion, hat tip to the creator.

Windows Logo

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

Internet Explorer Logo

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

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!

Opera Logo

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

HTML5 Logo

HTML5 can’t shine without CSS3!

Volkswagen Logo

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

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.

• CSS3: Create A Breadcrumb Navigation Menu
• CSS3: Create A RSS Feed Logo
• CSS3: Create A Search Box
• CSS3: Beginner’s Guide
• CSS3/HTML5: Create Web Pages
• CSS3/HTML5: Create An AJAX-based Contact Form