From the technical aspect this is well done because it shows the power of CSS. From a designer's point of view it is quite far from perfect. The icons look weird and the active state looks quite uninspired with only showing an inner shadow. We shouldn't over hype such things just because "there are no graphics used". The user doesn't care if there are graphics used or not. Also the user won't recognize a difference in loading time because the icons wouldn't weight many bytes.
I'd probably use this code and change the active state to use a different color (all in CSS of course). It might even be possible to have the text and icon shift slightly down and to the right (all in CSS of course). Those changes would give it a satisfactory active state IMO.
I decided to put my money where my mouth was. Here's an attempt at a modified active state that, at least in my eyes, looks more like what I would expect out of an active state:
Could you elaborate on the weirdness issue? I'm not a designer but but would like to learn about the flaws these may have. The active state doesn't look so good though, agreed.
