Pure CSS Twitter Fail Whale
An experiment in CSS
Click on the picture above to (hopefully) see a picture of the ever-vigilant Twitter ‘Fail Whale’ fully rendered using CSS. If you’re using a Webkit browser (Safari or Chrome), it should also be animated using the webkit-animation CSS functions. If you are viewing in IE8 or below, well, this isn’t an experiment for you.
The idea for this came to me this morning after being greeted first thing this morning by another Twitter outage. I’d been looking for something to stretch my CSS muscles on, and the Fail Whale seemed perfect. Also I think the animation only adds to his (or her?) charm.
How was this made?
The short answer is very painfully, by hand, using trial and error. Curves are done using various uneven border-radius properties, stranger angles (such as the strings) are masked using containers with overflow: hidden; set on them. I hope someone else gets a bit of enjoyment out of my wasted Sunday. It was a fun experiment that I don’t plan on repeating any time soon.
What about IE?
This was requested by a lot of people. This is how IE8 renders it. (quite the fail-whale indeed…)
(I’m actually fairly impressed, graceful degradation is what it’s all about!)
This would not have been possible without the inspiration of the original fail whale illustration by @yiyinglu. Check out the incredible collection of fandom she’s responsible for here: http://www.whatisfailwhale.info.