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!
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!
Yeah my eyes also can’t believe that, but it’s iMac “assembled” purely with CSS3.
It’s Apple Keyboard built with CSS3! Heck, the keyboard buttons can even be pressed.
Oh, one more thing: iPhoneCSS3.
The real awesomeness of CSS3 is that it can be used to build anything including plants and animals!
A tiring day? Let’s have a CSS3 coffee, best served with Safari/Google Chrome.
This Doraemon is famous for CSS3 compatibility testing. Try it in Internet Explorer 8 or below and have a nice day.
Now you are looking at a cat built completely with code! Too bad the CSS3 can’t generate sound effects, at least for now.
“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.”
looping audio. My CSS fails CSSLint test and I’m really proud of this.”
The CSS3 is so great that it can also be used to build fundamental asset for web design, such as these patterns.
BonBon are sweet CSS3 buttons created with a goal in mind: sexy looking, really flexible buttons with the most minimalistic markup as possible.
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.
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.
Another set of social media icons that show the possibilities of the CSS3 in creating usable icons.
“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.”
84 simple GUI icons using just CSS and semantic HTML. This is still considered as “non-production ready” icons, but they look very promising.
The Twitter fail whale will not fail to surprise you, except in Internet Explorer 8 or below.
User Interface elements made possible with CSS3, and it looks really sleek!
A tribute to Photoshop without using Photoshop.
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.
Retro Apple logo presented using CSS3, still as awesome as the time it was created.
Years before, who would have thought the Atari logo will be re-created using CSS3.
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!
Famous user-powered showcase site Dribbble’s logo showcased using CSS3.
Magento’s logo is not too hard to draw but the outcome looks professional.
I’m lovin’ CSS3!
Perfect proportion, hat tip to the creator.
Windows logo! Looks really awesome, and it’s easy to create!
Really great creation! It works in major browsers except Internet Explorer 8 or below.
I’m not sure you love the new logo of Google Chrome or not, but this CSS3 Google Chrome logo looks awesome!
Now a practice for you: what are the differences between this CSS3 piece and the real deal?
HTML5 can’t shine without CSS3!
Except the color scheme, this CSS3 clone looks identical to the original one.
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!
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.