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

IE8's whale fails.
(I’m actually fairly impressed, graceful degradation is what it’s all about!)

Credits

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.

170 Comments

Derek Anderson says:

Brilliant! You’re CSS kung-fu is strong, good work!
George Lugar says:

I’m surprised it doesn’t work well on the iPhone. Is mobile Safari that different from the most recent webkit? Looks awesome though. Maybe an SVG version might be easier because you’ve got some tools for that though.
chris says:

Looks great on the nexus one!
Mo Kargas says:

Fine on Droid too. Excellent work
dedenf says:

gorgeous!
Manmohanjit Singh says:

Good job, looks amazing. Stunning.
MetaView says:

Works well on Palm Pre.
Nitesh Rijal says:

A-W-E-S-O-M-E
Steve says:

Good job kid works on the iPhone 4 too.
Tomh says:

Works on the iPad, but seams start to appear once animation begins. Still impressive, though.
Steve Dennis says:

Thanks for the comments guys :) Glad it works on people’s phones too!
Mathias says:

The CSS-fu is strong with this one.

(Please make your comment <code>input</code> fields wider, I accidentally entered wrong information for that last comment using autocomplete and I didn’t even notice.)
James J M says:

That’s indeed strong fu!
Steve Dennis says:

Sorry about that Mathias, what device are you browsing on? There’s still some issues with the handheld CSS I haven’t resolved yet. Deleted the duplicate comment for ya.
haupt says:

That’s pretty slick. Now put the keyboard down and step away from your computer. ;P
Danny Tipple says:

Certainly a lot of time and effort has gone into that. Check it out in IE if you want a laugh.
Steve Dennis says:

As funny as it looks in IE, I was shocked that it was still vaguely recognizable to be honest!
Veera says:

Brilliant!
HTML Artists says:

Looks great….
Iwani says:

You are a genius, bro!
Gabri says:

This is complete awesomeness, i liked that you made it all with CSS you could have been used images for the whale ,ropes , waves even birds and animate them too.

great job
Marco Jardim says:

Sweet mother of patience… but awesome job nonetheless :)
Anders Rune Jensen says:

Cool example!

But why not have a flattr button instead of the donate button in the top :-)
Alex Hall says:

Absolutely fantastic “the CSS3 force is strong in this one”!! I honestly would not have the patience for something this extravagent, although I’m now very tempted to try something myself.

Great CSS3 example, if completely pointless! :-P
Andreas Jacob says:

Brilliant! Eespecially the animated version is really really cool ;-)
mosez says:

luvin’ it
Artis says:

Keyboard stopped my jaw from dropping on to the floor. I am speechless.
Steve Dennis says:

@Alex the complete pointlessness of it is part of what inspired me to do it, hehe. :) One thing I learned is that the browsers need to hurry up and standardize on their border-radius attributes. If we’re still having to do -moz and -webkit a year from now, there’s going to be a lot of messy CSS to clean up.
Japerman says:

Awesome! good job
Steve Dennis says:

@Anders I hadn’t heard of Flattr until you mentioned it, I’ve signed up for a beta invite :) (no one uses the button anyway though, its just there to make me feel better about not being ad-driven).
Locuri de munca says:

Great example of CSS3 power. To bad it’s only visible on WebKit powered browsers.
Steve Dennis says:

Only the animation, the image itself displays just fine in the latest Opera and Firefox. Has anyone tested it in the IE9 preview? How does it hold up?
James says:

Insane! And reading the css was very educational; it’s inspired me to start trying harder with CSS3.
Thanks
baja says:

GREAT STUFF!! ;)
Steve Dennis says:

Thanks @Anders :)
Bjørn says:

You Sir, are a genius.
Andrei Zharau says:

This is great! We all were so impressed!
Robert says:

Where I live (Austria), we have a saying: “Bistdudeppert” to express our highest respect and appreciation. Fits.
room34 says:

A stunning achievement… I’m in disbelief that you managed (and had the patience) to wrangle CSS3 into doing this.
Valentin says:

Great stuff! It’s worth opening the page with IE8. It looks like modern art :P
Slei says:

Not bad :)
nisha singh says:

Good work @Steve Dennis
memo says:

That’s so awesome!!!
Mohammad Koubeissi says:

Amazing.
Sven says:

This is just great. Sitting in Germany and being stunned!
Greisha says:

In IE9 the layout is fine. Just the animations don’t work.
http://tinypic.com/r/15x0myu/6
Hitesh Chavda says:

Good Work.
But i want to say that css is not invented for this type of animation. It consume about 45-52% of CPU on chrome 5.
Steve Dennis says:

I agree 100% @Hitesh. I don’t recommend *anyone* use anything like this for real-world complex animation. That would be silly indeed. It was merely in exercise in problem solving :)
Steve Dennis says:

@Greisha, awesome! Props to the IE9 team :)
berry__ says:

Looks like modern art in Opera too. Looks great in Chrome though. I was actually gonna post that you should get a life, but seriously: who tested it in all available browsers? I should get a life.
Steve Dennis says:

Haha, fair call though @berry :) (though update your Opera, it looks fine in the latest release)
fimbim says:

omg. So much work… is this pic really in use?
ferdy182 says:

Works on Android 2.2 too with animation! :D
Jaik Dean says:

Excellent work! In IE5.5 it looks like a glitchy C64 rendering.
Steve Dennis says:

I love the C64 :) It was my first computer!
MajorSparrow says:

Excellent stuff, keep up the good work.
Michel says:

Amazing! The CSS3 force is indeed strong with you! Hats off! :)

- Works fine in my Firefox 3.6 browser, just without the animation.
- Works with the animation in Safari 5/Win, but consumes ~ 95% CPU on my ThinkPad… :(
- In IE8, looks pretty well, too, considering the fact that IE8 doesn’t support CS3 at all… :)

All in all, congrats on the great job! And it’s not pointless—experimenters like you move the Web forward!
Matt Anderson says:

Dude… that’s freaking awesome. My mind was just blown thinking about it. Great work and by no means was that a waste of a Sunday in my book.. :)
faryl says:

Spectacular! Brings back memories of high school “computer science” - I used BASIC to make a picture of a tree by a pond with a bird & turtles that would fly/swim (respectively).

I’m secure enough with my geek-girl to tell you that this totally made my day. :-)
Jonathan says:

I’d love to see these cross-browser screenshots posted with this article. It’s quite a feat and I think we’re all eager to know more about it and the level of success. How many hours did it take you?
Tyler says:

Thats cool! Realistically you would probably want to use SVG to draw the whale and the birds but its pretty cool that you could use css3
Zen Elements says:

Fantastic! I really enjoy seeing CSS3 being experimented with in these ways and for an added chuckle, take a moment to see how good ol’ IE renders things..

Alex
Daniel warmth Delgadp says:

Just amazing… can I be your padawan? lol
Toine Branbergen says:

Wow, awesome! Thats pure CSS3 art!:)
witek says:

Opera supports CSS3 transform using “-o-transform” attribute. Transitions are also there, but not exactly the same as animation: http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/

http://www.opera.com/docs/specs/presto25/css/transitions/ (this is presto 2.5 reference, but it works since presto 2.3)
Steve Dennis says:

Cheers for the links @Witek :) I’m a huge Opera fanboy, so I may try to implement those transforms…
Daniel warmth Delgado says:

please update us when you have that new version ready then! How about a tutorial of how you did it? :P share with us your knowledge
bohwaz says:

Would be more useful in SVG… Why everybody is trying to draw thinks with CSS?
Steve Dennis says:

Hmm, looks like Opera can transition from one state to the other based on something like a :hover pseudo class, but I can’t find anything about looping an animation like you can with webkit-animate. Ah well.

I’m not writing a tutorial on this lol, I wouldn’t want to put anyone else through that level of hell :)
Daniel "warmth" Delgado says:

maybe you can do funny things like the whale to scape when hovering :P

sometimes that pain is great to learn :) lol
Daniel Hahler says:

I’ve submitted it to browsershots.org - you can see it rendered by a lot of different browsers there:
http://browsershots.org/http://www.subcide.com/experiments/fail-whale/
nick says:

This should replace the Acid test
David Elliott says:

This is awesome and very well excuted. Rock on!
Avocats Montreal says:

Impressive work. I had a blast reading it with Firebug. Fail Whale is the win in CSS3.
KIDO says:

Unbelievable!
Marc Castles says:

Madness!
myymi says:

受教了，感谢！
shashank says:

Great!!!!!!!!!!!!!!!!!!!!!!!!!!!! awesome!!!!!!!!!!!!!!!!!!!!!!!!!!!

would like to learn some CSS from you brother..as m still a novice..
shashank says:

Please rply on shank.sss@gmail.com if you get some free time..
thanks
TheAL says:

One of the most impressive css/html accomplishments I’ve ever seen. Even studying the finished product I don’t think I could recreate it! XD
Adam Eivy says:

LOL. Oh, I love seeing how IE renders things that are so beautiful and elegant in other browsers.
Subrato Paul says:

Excellent CSS innovation! The animation is so good on Google chrome.
Webstandard-Team says:

Awesome job! Isn’t it a good way to announce the “Acid-4 Test”? ;o)
BRANKKO says:

Great job!
Ron says:

Its really cool!
Antoine RJ Wright says:

Very cool. And I totally admire you Su day persistence in making this. I pretty much live on my mobiles, and so this indeed fun to see. On my iPad, this seems to render just fine. On my Nokia N97 (Symbian OS, Webkit Browser), it looks like the IE screenshot, which is surprising. But, that does work. Maybe this can be tweaked for another Acid test as prescribed abaci, that would be interesting.
Darrell Banks says:

Oh my god. You my friend, are a genius. Brilliant work. ‘Nuff said.
zizo says:

looks good n nokia N900
Simon says:

Wonderfull !
климатици says:

Wow. Amazing guys…
Kobus says:

*drooooooooool*
Kobus says:

@TheAL: I could not even recreate it as a static image, leave alone a piece of CSS magic such as this :P
Roy says:

Awesome…how did you do it??
Gaurav Mishra says:

Fuckin Fuckin Fuckin Orgasm

You rock man!
Stefan Stanica says:

Well done man. Excellent!!!
Daniel "warmth" Delgado says:

It renders very badly in my default Nokia N97 browser and also in Opera Mobile! :(
vijayraj says:

genius work
Natasja says:

Wow, respect!
azul says:

Hi, it is amazing view in Safari !!
kalleboo says:

On my Android 1.6 phone (SE X10), it looks mostly like the IE screenshot, except a handful of radiuses that work: on the whale’s forehead, one of the strings, and the bodies of the birds. Also, oddly enough, the animation works perfectly. So it’s an animated, mostly-square whale.
Steve Dennis says:

@kalleboo yeah thats the previous version of the webkit rendering engine which didn’t support uneven radius properties. It should be fixed next time they release an update for the mobile browser :) It looks the same on the current iPhone, and Safari 4.
Helena says:

Super Awesome! Great job - very inspiring.
Carmelo says:

Looks awesome - great job!
FailTweet says:

That’s cool and all, but, what a giant waste of time!
Rilla says:

I would not ever have discovered it was anything other than an image. Thanks for sharing!
Bartjan says:

Opera on my HTC HD renders it exactly like the IE example.
Daniel says:

haha love the IE version!
wevdeb says:

Works great on the htc evo on chrome. hmm, should try on opera mini too…
kirtan says:

This is Pure Awesome!!!
Inwebdeveloper says:

Works fine in my Firefox, but i don’t see the animation
Jollson says:

its coool..looks awesome
Bryn says:

WOW this is truely AWESOME, IE 8’s interpretation is’nt acutally that bad considering. Looks great in Firefox but the Webkit animation is brilliant. Probably took quite a while to make though eh?
Stacy says:

I saw this on my phone first (Android MyTouch) and it look much like the degraded IE version, but still animated. Then I had to see for sure on a more appropriate browser, and I am thoroughly impressed. Very nicely done.
Drum Boom says:

WE NEED CSS3!!! This is good example to make Microsoft faster in development and distribution of IE
Gaurav Mishra says:

Just checked the whale in IE 6 also

more look like a lego brick representation..
bondaya says:

looks greatttttt on GOOGLE CHROME…. good animation with css :)
Joe says:

Wow! How long must it have taken to get all the curves right? Good work and cheers to ie8 for trying. :D
nudel says:

luv the way it ‘degrades’ in IE!... :)
you surely are a talented thing
Steve Dennis says:

Thanks nudel :) @joe, it took about 12 hours on and off.

I’m going to have to figure out some UI to manage this many comments, it’s getting ridiculous!
Matthys Bruno says:

Best stuff I’ve seen this year and it’s not even my birthday yet (next Monday!).
d13t says:

Like it! And with a few adjustments in the css-code, combined with WebSaver (Mac) this makes a pretty nice screensaver on my 30 inch monitor. :)
Adjustments made:
body { margin: 0; padding: 0; background: #F15A22; overflow: hidden; }
I also added { margin: 0 auto; zoom: 4; } to #failwhale and removed the border radius properties.
Zoom 4 if you have a big screen, else try something different.
d13t says:

Here it is! [Picture of screensaver] http://twitter.com/d13t/status/16394253006
Chi says:

Really impressive work
Nicolas says:

The technical feat is impressive but it is useless practically. I hope people won’t start using it into real websites. First, just an image would have done the same final result and would be way easier to maintain. Second, using div for the sake of presentation is not best practice and is what we try to avoid the best we can as web designers.
Steve Dennis says:

I never have or will claim this to be practical in any way. Clearly it isn’t. I thought that was obvious enough that I didn’t need to mention it, but clearly I should have. There is nothing semantic, optimal, or good about this as an implementation. It’s just a bit of fun. Lighten up people.
Sheng says:

hun… i could see the animation on safari but not firefox.
(safari 5.0) (Firefox 3.6.3)
Liena Aifen says:

it’s really great css
Joel says:

Nice job! works on the n900 too (but no animation)
Selvam says:

Amazing work…..this triggers me to experiment with css3 ;) many thanks
Chandan says:

You the MAN. CSS-3 is just Awesome…. Some browsers need to upgrade in their so called 9th version.
Hemanth says:

In opera the picture renders perfectly with no animation
why is that so
Matt says:

Impressive. And it’s pretty cool to play with in Firebug to see how everything is working.
Daniel R. H. says:

That’s amazing. Working great on IE9, but on IE8 weeell, it reminds the Atari games
tareq says:

Good job.. nice to see .. again praying for IE’s death .. :D .. :P ..
Em says:

The IE version is actually quite useful. It gives noobs like myself an easier way to figure out how it was done (alongside the source). Looks perfect on IE9 by the way.
PF says:

Fantastic!
Ardhian says:

It’s very amazing! You even added an animation to it, what a great result!
Elizabeth Kaylene says:

Very cool!
极限梦幻 says:

IE，网络进步的绊脚石。
Dianso says:

css3太强大了

比如这个

http://nicolasgallagher.com/experimental-pure-css-social-media-icons/
yukaizhao says:

great work.
ONEBOYS says:

“by hand, using trial and error. “

I want to say 辛苦了 to you。Great work
DesignFellow says:

Great work..
lsnail says:

用得全是 webkit-..., moz-...这样的类，IE不歇火才怪
Stand says:

Man, you’re crazy…really congrats…
Praful H says:

Jaw dropped down to earths’ core!!!
shaneshack says:

Looks the best in latest Safari. Renders like IE in Blackberry Storm (v1). Awesome browser test, though. Kind of like the Acid test!
surda says:

对IE略有偏颇，用得都是webkit-、moz-类......
Tim says:

Impressive!
witek says:

“Hmm, looks like Opera can transition from one state to the other based on something like a :hover pseudo class, but I can’t find anything about looping an animation like you can with webkit-animate. Ah well.”

Indeed, transition cannot be looped indefinietly. You can define function and duration of transition, but after this duration nothing will change. One will need small javascript with something which will switch state every few seconds (transitions are also applied when class propert or any css atribute is changed from JS).

But then it will not be pure CSS :(
Aaron says:

Very nice!
Internet Marketing Bureau says:

Super!
Diseño de páginas web says:

Wow exelente, esto esta de rompecocos. Buen trabajo !!
Cindy says:

I know just enough code that a peak at the source tells me this is an amazing feat. Well done.
Ben says:

Awesome. Fail Whale indeed. Perhaps next time you can code it with out 295 errors?
haha just playing! This is fricken awesome! Keep up the good work!
Harsha M V says:

damn good mate.. keep innovating :D SUCK IT IE
Anwerso says:

I’ve made Bender with similar using of CSS border-radius and some transform. Only I using clip: rect(...) property to crop elements.
http://anwerso.com/lab/bender/

Nice animation btw.
izoel says:

Freaking Awesome .. well done, looking great in Chrome v5.0.375.99 with cute animation, too bad there is no animation in FireFox 3.6.8 ,.. and i don’t give a damn what happen in IE :)
56live says:

damn good mate
Chuck says:

Holy crap. You’re insane. Oh, and quite awesome.
Danijel Gajan says:

I like the way you found a way to use CSS in a completely unorthodox and fun way. You brought a smile to my face :) Awesome work man!
Nirupam Burman says:

Just mouth-shut,speechless work..Maybe this is the reason i want to start learning CSS3 .Plz tell me where can i learn it from scratch..links etc
paula says:

guauu, very good

muyyy buenoo
Matthew says:

You sir, are a God amongst Men. Pay not attention to me, as I revel in your blinding glory.
Asian Bridal Makeup says:

Amazing work, even looks good in IE lol.
Moisha says:

Works perfectly fine in IE9. Looking forward to it.
SMS says:

Works in Safari 5 as expected
frank says:

That really looks great!
Tice says:

Aww… now you broke it with that “http://t.co/@“onmouseover=“document.getElementById” thingy. Please correct that.
Betty says:

Google’s Google Books Whale fail tribute to Fail whale of twitter is awesome. http://bit.ly/dJ20kZ

Commenting is not available in this weblog entry.

Articles & Tutorials