Hongkiat.com: Coding Kung-fu: 35 Graphics Built Purely With CSS3 |
| Coding Kung-fu: 35 Graphics Built Purely With CSS3 Posted: 07 Feb 2012 09:43 PM PST 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 IconRSS 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 iMacYeah my eyes also can’t believe that, but it’s iMac “assembled” purely with CSS3.
Apple KeyboardIt’s Apple Keyboard built with CSS3! Heck, the keyboard buttons can even be pressed.
Apple iPhoneOh, one more thing: iPhoneCSS3.
Cherry BlossomThe real awesomeness of CSS3 is that it can be used to build anything including plants and animals!
Coffee CupA tiring day? Let’s have a CSS3 coffee, best served with Safari/Google Chrome.
DoraemonThis 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
PatternsThe CSS3 is so great that it can also be used to build fundamental asset for web design, such as these patterns.
BonBonBonBon are sweet CSS3 buttons created with a goal in mind: sexy looking, really flexible buttons with the most minimalistic markup as possible.
iOS IconsAmazing? 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 IconsThat’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 IconsAnother 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 Icons84 simple GUI icons using just CSS and semantic HTML. This is still considered as “non-production ready” icons, but they look very promising.
Steve JobsSteve Jobs is not only the icon of the digital age, but also the leader who greatly promotes HTML5.
Twitter Fail WhaleThe Twitter fail whale will not fail to surprise you, except in Internet Explorer 8 or below.
umbrUIUser Interface elements made possible with CSS3, and it looks really sleek!
Adobe Photoshop LogoA tribute to Photoshop without using Photoshop.
Android LogoThe 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 LogoRetro Apple logo presented using CSS3, still as awesome as the time it was created.
Atari LogoYears before, who would have thought the Atari logo will be re-created using CSS3.
BP LogoSimple 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 LogoFamous user-powered showcase site Dribbble’s logo showcased using CSS3.
Magento LogoMagento’s logo is not too hard to draw but the outcome looks professional.
McDonald LogoI’m lovin’ CSS3!
Twitter BirdPerfect proportion, hat tip to the creator.
Windows LogoWindows logo! Looks really awesome, and it’s easy to create!
Internet Explorer LogoReally great creation! It works in major browsers except Internet Explorer 8 or below.
Google Chrome LogoI’m not sure you love the new logo of Google Chrome or not, but this CSS3 Google Chrome logo looks awesome!
Opera LogoNow a practice for you: what are the differences between this CSS3 piece and the real deal?
HTML5 LogoHTML5 can’t shine without CSS3!
Volkswagen LogoExcept the color scheme, this CSS3 clone looks identical to the original one.
ReflectionWith 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! MoreWilling 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.
|
| You are subscribed to email updates from hongkiat.com To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No comments:
Post a Comment