{"id":11106,"date":"2012-02-08T21:01:34","date_gmt":"2012-02-08T13:01:34","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=11106"},"modified":"2022-08-12T16:23:55","modified_gmt":"2022-08-12T08:23:55","slug":"coding-graphics-with-css3","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/coding-graphics-with-css3\/","title":{"rendered":"Coding Kung-fu: 35 Graphics Built Purely With CSS3"},"content":{"rendered":"

Look at the graphics below, awesome Photoshop works, right? Nah, they were created by CSS3. Yes, they\u2019re completely \u201cdrawn\u201d by CSS3<\/strong>! When we had seen enough CSS3 animations, we thought those were all CSS3 can do as a potential Flash killer, but we\u2019re wrong. Developers perhaps don\u2019t satisfy with the fun of animation, so again, they push the boundaries of CSS3 to challenge the graphic editor\u2019s realm.<\/p>\n

With this post comes 35 carefully crafted CSS3 graphics which even include something you wouldn\u2019t relate with CSS3 like Apple iPhone<\/strong>, cartoon character Doraemon<\/strong>, and more surprises! Heck, some of them even come with a detailed tutorials that teaches you how to achieve it! So don\u2019t miss the great chance to learn to create graphics using CSS3 and a little bit of HTML, let\u2019s get naughty with CSS3!<\/p>\n

You are strongly recommended to view these demos using the latest version of Safari<\/a> or Developer version of Google Chrome<\/a>. Most demos support the latest version of Firefox<\/a> and Google Chrome<\/a>, though.<\/em><\/p>\n

RSS Feed Icon<\/a><\/h3>\n

RSS Feed Icon built with CSS3, exclusively from Hongkiat! Along with the link comes a tutorial in which you can actually learn to \u201cdraw\u201d the RSS Feed icon without using even a single image. Create the CSS3 miracle with your own hands!<\/p>\n

\"rss<\/figure>\n

Apple Keyboard<\/h3>\n

It\u2019s Apple Keyboard built with CSS3! Heck, the keyboard buttons can even be pressed.<\/p>\n

\"apple<\/figure>\n

Apple iPhone<\/h3>\n

Oh, one more thing: iPhoneCSS3.<\/p>\n

\"apple<\/figure>\n

Cherry Blossom<\/a><\/h3>\n

The real awesomeness of CSS3 is that it can be used to build anything, including plants and animals!<\/p>\n

\"cherry<\/figure>\n

Coffee Cup<\/h3>\n

A tiring day? Let\u2019s have a CSS3 coffee, best served with Safari\/Google Chrome.<\/p>\n

\"coffee<\/figure>\n

Doraemon<\/a><\/h3>\n

This Doraemon is famous for CSS3 compatibility testing. Try it in Internet Explorer 8 or below and have a nice day.<\/p>\n

\"Doraemon\"<\/figure>\n

Meowww!<\/a><\/h3>\n

Now you are looking at a cat built completely with code! Too bad the CSS3 can\u2019t generate sound effects, at least for now.<\/p>\n

\"meowww\"<\/figure>\n

Mushroom, Triforce, Pok\u00e9\tball, Kirby<\/h3>\n

\u201cBeing a nerd, I\u2019ve made some nerdy creations \u2013 a Mario mushroom, the Triforce, a Pok\u00e9ball, and Kirby. For those that use dinosaur browsers, there\u2019s a screenshot of what it\u2019s supposed to look like.\u201d<\/p>\n

\"mushroom,<\/figure>\n

Nyan Cat<\/a><\/h3>\n

\u201cIt contains 81 DOM elements, 688 lines of pure CSS and one JavaScript function for looping audio. My CSS fails CSSLint test and I\u2019m really proud of this.\u201d<\/p>\n

\"nyan<\/figure>\n

Patterns<\/a><\/h3>\n

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

\"patterns\"<\/figure>\n

BonBon<\/h3>\n

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

\"bonbon<\/figure>\n

iOS Icons<\/a><\/h3>\n

Amazing? Yes. These icons are built by rounded corners<\/em>, shadows<\/em>, gradients<\/em>, rgba<\/em>, pseudo-elements<\/em>, and transforms<\/em>, with the help of certain tools such as westciv\u2019s tools and Border Radius.<\/p>\n

\"ios<\/figure>\n

Social Media Icons<\/a><\/h3>\n

Another set of social media icons that show the possibilities of the CSS3 in creating usable icons.<\/p>\n

\"social<\/figure>\n

Peculiar<\/h3>\n

\u201cPeculiar 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\u2019t need to use any image at all.\u201d<\/p>\n

\"peculiar\"<\/figure>\n

GUI Icons<\/a><\/h3>\n

84 simple GUI icons using just CSS and semantic HTML. This is still considered as \u201cnon-production ready\u201d icons, but they look very promising.<\/p>\n

\"gui-icons\"<\/figure>\n

Steve Jobs<\/h3>\n

Steve Jobs<\/a> is not only the icon of the digital age, but also the leader who greatly promotes HTML5<\/a>.<\/p>\n

\"steve<\/figure>\n

Twitter Fail Whale<\/a><\/h3>\n

The Twitter fail whale will not fail to surprise you, except in Internet Explorer 8 or below.<\/p>\n

\"Twitter<\/figure>\n

umbrUI<\/h3>\n

User Interface elements made possible with CSS3, and it looks really sleek!<\/p>\n

\"umbrui\"<\/figure>\n

Adobe Photoshop Logo<\/h3>\n

A tribute to Photoshop without using Photoshop.<\/p>\n

\"adobe<\/figure>\n

Android Logo<\/a><\/h3>\n

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.<\/p>\n

\"android<\/figure>\n

Apple Logo<\/a><\/h3>\n

Retro Apple logo presented using CSS3, still as awesome as the time it was created.<\/p>\n

\"apple<\/figure>\n

Atari Logo<\/a><\/h3>\n

Years before, who would have thought the Atari logo will be re-created using CSS3.<\/p>\n

\"atari<\/figure>\n

BP Logo<\/a><\/h3>\n

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!<\/p>\n

\"bp<\/figure>\n

Dribbble Logo<\/a><\/h3>\n

Famous user-powered showcase site Dribbble\u2019s logo showcased using CSS3.<\/p>\n

\"dribbble<\/figure>\n

Magento Logo<\/a><\/h3>\n

Magento\u2019s logo is not too hard to draw but the outcome looks professional.<\/p>\n

\"magento<\/figure>\n

McDonald Logo<\/a><\/h3>\n

I\u2019m lovin\u2019 CSS3!<\/p>\n

\"mcdonald<\/figure>\n

Twitter Bird<\/a><\/h3>\n

Perfect proportion, hat tip to the creator.<\/p>\n

\"twitter<\/figure>\n

Windows Logo<\/a><\/h3>\n

Windows logo! Looks really awesome, and it\u2019s easy to create!<\/p>\n

\"windows<\/figure>\n

Internet Explorer Logo<\/a><\/h3>\n

Really great creation! It works in major browsers except Internet Explorer 8 or below.<\/p>\n

\"internet<\/figure>\n

Google Chrome Logo<\/h3>\n

I\u2019m not sure you love the new logo of Google Chrome or not, but this CSS3 Google Chrome logo looks awesome!<\/p>\n

\"google<\/figure>\n

Opera Logo<\/h3>\n

Now a practice for you: what are the differences between this CSS3 piece and the real deal?<\/p>\n

\"opera<\/figure>\n

HTML5 Logo<\/a><\/h3>\n

HTML5 can\u2019t shine without CSS3!<\/p>\n

\"html5<\/figure>\n

Volkswagen Logo<\/a><\/h3>\n

Except the color scheme, this CSS3 clone looks identical to the original one.<\/p>\n

\"volkswagen<\/figure>\n

Reflection<\/h2>\n

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.<\/p>\n

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

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!<\/p>\n

More<\/h2>\n

Willing to actually do something with CSS3? You\u2019ve come to the right place! Below are guides and tutorials written to aid you greatly on your road to mastering the CSS3.<\/p>\n