As a weekend project, I recreated some well known logos in pure CSS. This was a purely for fun experiment, heavily inspired by the Twitter logo done here.

As CSS3 grows more powerful with each browser release, people discover more ways to hack and create things that it wasn't intended for. A whole slew of icons made entirely in CSS are abound; ranging from simple GUI icons, to more sophisticated iOS icons, animated ones, and even recreating the Nintendo Gameboy.

Rendering icons in pure CSS has its advantages. It allows programmers who aren't proficient in imaging programs like Photoshop to create high quality assets. It maintains image quality as it resizes, so it's not lossy on high density displays or zooms. It's readily available for modifications and tweaks, mitigating the bothersome back and forth with opening Photoshop and replacing an entire directory of assets. There are potential performance gains by letting your more than capable browser render a couple lines of code, mitigating additional network roundtrips for image fetching.

Of course, it also comes with some drawbacks. There's no lasso or magic brush tools handy in CSS, so even creating small 16x16 icons will be significantly slower than traditional methods. It will likely break on non-modern browsers. And even on modern browsers, there are often browser specific bugs that cause some fancy CSS rule to malfunction.

However, as more browsers consolidate and web standards continue to unify, cross-browser performance will become more of an afterthought. Using CSS to style, draw, and animate will see much heavier adoption and further techniques will arise. These hacks will eventually have a chance to find its place in parts of standard web development.

See discussion on Hacker News.