Using Only CSS

When you are a designer that also does development, it seems that the two jobs have a constant ebb and flow. There are times when I spend a week or two without even writing a single div tag. On the other hand, there are days and weeks that I don’t even open Photoshop or Illustrator. Lately, between work at Ender Labs and freelance projects, I have been heavily focused on development rather than design.

While I do miss designing, this has pushed my development skills quite a bit. To demonstrate this, I decided to go through a little exercise — making the Onyx icon out of pure CSS. No images, just code. You can see the result of this exercise here.

The icon looks best in Webkit browsers (Chrome and Safari), but I also made sure that it at least looked acceptable in the latest versions of Firefox. If you look at the code, you will find one image, but that is only to force Webkit to clip the icon to a roundrect. This is a known bug with border-radius in the latest versions, something I only found out after plenty of banging my head on the wall.