It is just a cool demo that shows us the extent of possibilities.

Like the people who bike/run cross country, when a flight from LAX to JFK is under 6 hours.

I wish they donate some of their effort (and knowledge) in a more usable form like helping jQuery Mobile project for a better realistic UI L&F.

edit (after 1st? downvote): All I did mean that since he has now a good command of things, maybe he could help JQM. I did not intend to belittle the effort in anyway.

I can't help but roll my eyes here: "I wish all those people painting canvases would paint my living room... now THAT would be useful." This seems to come up every time there's an art project featured on HN. It's art people; it's its own point!

Besides, the fellow did actually seem to have a use for this (scaling up/down, zooming) tho most of that stuff could be achieved more simply with image. Anyway: Hackers -> use tech for fun, not just utility.

Got it. It is a very cool demo. Thanks!

#1 advantage: zoomable. It's essentially procedurally drawing in the browser without using SVG, which isn't as integrated with HTML.

There are a ton of uses for drawing with CSS; I had a big commercial project that was pulled off this way. Requirements were no Flash and no SVG. It's the live "fear gauge" on this page: http://www.marketpsychdata.com/ (Unlike this demo, it uses images, and is not pure CSS drawing).

The "made for" logo is for a Iphone wall paper app. I'm guessing they will use it for their website to display wall papers.

[edit]infact they already do. http://ensoul.me/2V

At least for me, all the phones on their website still render with an image, unlike the demo.

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.

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

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

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

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?

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.