[rimantas]

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.

[CaveTech]

> Save bandwidth

With a 129kb CSS file I'm not so sure

> Client-side optimization

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.

[bad_user]

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 :)

[nirvdrum]

I'll take the network hit over the CPU hit (and thus battery life). This page is constantly using about 45% of a core on my MBP in Firefox 9.

[dextorious]

Sure, but the (real or imaginary) savings of this is not about your hit, is about the hit from the server point of view.

[nirvdrum]

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."

[atarian]

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?

[dextorious]

Sure. That's why I added the "imaginary" qualifier to the savings.

I just wanted to clarify that the savings the other commenters talk about were taken from the server point of you.