Doing something in CSS instead of graphics often can let you save some HTTP requests and/or bandwidth — this comes handy if you are into client-side optimization.
Also it is easier to update later: just change some values instead of recreating entire image (or set of them).
However, depending on the case using sprites or data-uris may by preferable.
Depends how you look at optimization... will definitely take a lot more processing to render all that CSS instead of an image
> Easier to update
If you consider mucking with CSS layout properties and doing pixel calculations easier to update than using a program such as photoshop/fireworks, I'm somewhat scared.
CSS is not optimized for graphics and if you're only interested in something static, in this case for instance the result is bigger than an equivalent PNG file. It also sucks for client-side optimizations in general because rendering CSS takes more processing power than displaying a bitmap.
What it does give you is smooth animations, however I think SVG would be more suited for vector graphics, since it is a format created and optimized for actual graphics and you can export from popular editors (like from Adobe Illustrator) to SVG easily.
Not to belittle this effort though, as this is cool :)
I'm not sure I want someone working on a front-end component trying to optimize for a back-end process without realizing the full impact of these front-end changes. I'm assuming/hoping in this case it's just a "hey, this is something fun I did."
Correct me if I'm wrong, but if the combined size of an image and its complementary CSS file is less than the size of a 129kb CSS file with "CSS3 images", then don't you essentially lose the benefit of reducing server load?
