Pure CSS Twitter Fail Whale

http://www.subcide.com/articles/pure-css-twitter-fail-whale/

by jakarta • 16 years ago

93 22 16 years ago

kwamenum862• 16 years ago

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.

thwarted• 16 years ago

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.

kwamenum862• 16 years ago

By that logic it is the same number of HTTP requests. Embedding images in the document is trivial at this point.

Groxx• 16 years ago

Awww, if you scale it up it gets horizontal gaps in the whale :'(

Other than that, very nice job. Wonder if Twitter would use it.

jrockway• 16 years ago

A fail whale that failed to render correctly would be amusing.

alain94040• 16 years ago

From the article:

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

psadauskas• 16 years ago

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.

pmjordan• 16 years ago

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.

trezor• 16 years ago

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.

Impressive none the less.

grandalf• 16 years ago

Works on ipad

uptown• 16 years ago

That's because it's magical.

Subcide• 16 years ago

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!

moron4hire2• 16 years ago

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.

mcobrien• 16 years ago

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.

moron4hire2• 16 years ago

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

nnash• 16 years ago

You act like its a pointless pursuit to try something experimental for fun just because you're bored. That is your point, no?

zepolen• 16 years ago

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?

GrandMasterBirt2• 16 years ago

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.

imagii• 16 years ago

I'm not trying to be a dick, but I think you mean CSS3. HTML5 and CSS3 aren't the same thing.

wushupork• 16 years ago

I think if I did this using purely tables and background colors, I'd probably get tons of down votes. Just saying.

Pure CSS Twitter Fail Whale

Related Stories