Its not that you have to, its that you can. This would absolutely be much better suited as SVG or canvas, but it does a good job of demonstrating how amazingly powerful CSS3 is.
If everyone only did something the "right" way, and the simplest way, the world would be a very uninteresting place.
I don't know about you but pretty much every live site I've been involved in has used some non-intuitive CSS and markup to achieve the intended result. CSS is great for its intended use of styling marked up text documents; as soon as you try to do anything that falls outside of that zone, such as implementing a contemporary website layout & design, you end up working against the language. It works, but it's a lot like inferring that Brainfuck must be a good programming language because it's Turing complete.
Yes, we have SVG, canvas, etc., but they aren't supported widely enough. Even if you ignore that and focus on the browsers with the best (X)HTML+SVG support, do the layout & design using SVG and the typesetting with HTML/CSS, the resulting markup and CSS aren't pretty at all - again, SVG is good for vector art, not laying out interactive pages.
Canvas is generic enough to do pretty much anything, but it's very low level. It's like the X server - you still need all the toolkit infrastructure on top to get anything done in most cases. This is fine for animations, games, etc. of course.
So yes, this particular animation could have been better implemented using SVG or canvas. Sure, it's interesting doing it with CSS3, but the sad thing is that it's more than that: the weird hacks required aren't far removed from the ones you need to use in practice, because the 'right' way you mention currently doesn't exist for the vast majority of what we do on the web.
It's more than a cool hack - it's a demonstration (intentional or not) that it's 2010 and we're still fighting our presentation languages.
If I cut down a 50 foot tall tree with a swiss army knife, it would not be a testament to the "power" of the knife, it would be a testament to my own stupidity.
If you cut down a 50 foot tall tree with a swiss army knife, I'd like to see how you did it. I think it's clear the author isn't stupid and did this to see what was possible with a limited tool.
My point was that, with enough perseverance, one can do practically anything with anything (or nothing). Just because something is possible doesn't make doing it an intelligent thing if it's just a brute force effort. While herculean efforts of perseverance are commendable displays of stamina (like (http://links.zigzo.com/files/2007/10/coat_20hanger_20gorilla...) this gorilla made out of coat hangers), once the basic theory has been demonstrated, the intellectual interest is over. See also, X program implementation in Y Turing-complete language (I'm specifically reminded of a chess engine written in the infamous Brainf*, which was really just a C chess engine converted to BF).
Perseverance and stamina are rare qualities, and that gorilla is a very nice work of art. A ported BF chess engine not so much. Now, a C-to-BF compiler would be interesting.
The recent "X in pure CSS" theme is important as it shows how advanced CSS3 is. They are tech demos, which as we know are often not meant to be anything more than that. They display how far you can bend CSS and nothing more. Just like the Blendtech ads, if someone cut down a tree with a pocket knife in an afternoon I bet 1/2 of us would run out to buy that knife.
If an artist had done this using more standard tools and rendered it as SVG no one would care. I think you've completely missed the point.
The very definition of hacking is using something in a way it was not meant to be used. Last time I checked, the top left of this site still said 'Hacker News'. If you find hacks stupid, why are you here?
The only html5 think here is border-radius. Now this just shows that we can encode weird shapes using borders which is a well known fairly old technique.
Perhaps we can have a small image maker took which generates html5 vs an image.
Now that is great and all and is probably a really nice experiment into doing stuff with CSS, but this is a tiny fraction of what CSS can do being used, but practically, an image takes less memory/cpu to render.
The HTML/CSS all up is about 34kb, but could be a lot less if minified, and the CSS was made for ease of drawing over optimization :) You could get a PNG down to less than 10kb easily (but of course, that was hardly the point hehe). Cheers for the comments guys!
A very clever hack. I wonder how much total memory is used versus the image-based version? A couple potential disadvantages: more http requests and more dom nodes. But I'm guessing the author did this just because they could, not as a demonstration of how things should be done.
You mean fewer HTTP requests. The CSS is entirely in the document. So unless you base64 encode the failwhale image and put it in a data: url in an img tag, it's one less request compared to an HTML page containing a single image.
Works neatly in Firefox and even better in Chrome, but fails horribly on my iPhone. Might just be due to the small screensize but I haven't tested that properly yet.
... stranger angles (such as the strings) are masked using containers with overflow: hidden
Hum, am I the only one who wonders why we have to reinvent, in 2010, a graphics language, and everyone seems to think it's cool?
Even on the Apple II you didn't to do such ugly hacks. Why now?