Articles & Tutorials

The articles and tutorials here are provided free of charge, and are fueled by caffeine.

Pure CSS Twitter Fail Whale

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

  1. Picture of Derek Anderson

    Brilliant! You’re CSS kung-fu is strong, good work!

  2. Picture of George Lugar

    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.

  3. Picture of chris
    chris says:

    Looks great on the nexus one!

  4. Picture of Mo Kargas
    Mo Kargas says:

    Fine on Droid too. Excellent work

  5. Picture of dedenf
    dedenf says:

    gorgeous!

  6. Picture of Manmohanjit Singh

    Good job, looks amazing. Stunning.

  7. Picture of MetaView
    MetaView says:

    Works well on Palm Pre.

  8. Picture of Nitesh Rijal

    A-W-E-S-O-M-E

  9. Picture of Steve
    Steve says:

    Good job kid works on the iPhone 4 too.

  10. Picture of Tomh
    Tomh says:

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

  11. Picture of Steve Dennis
    Steve Dennis says:

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

  12. Picture of Mathias
    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.)

  13. Picture of James J M
    James J M says:

    That’s indeed strong fu!

  14. Picture of Steve Dennis
    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.

  15. Picture of haupt
    haupt says:

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

  16. Picture of Danny Tipple
    Danny Tipple says:

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

  17. Picture of Steve Dennis
    Steve Dennis says:

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

  18. Picture of Veera
    Veera says:

    Brilliant!

  19. Picture of HTML Artists

    Looks great….

  20. Picture of Iwani
    Iwani says:

    You are a genius, bro!

  21. Picture of Gabri
    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

  22. Picture of Marco Jardim

    Sweet mother of patience… but awesome job nonetheless :)

  23. Picture of Anders Rune Jensen

    Cool example!

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

  24. Picture of Alex Hall
    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

  25. Picture of Andreas Jacob

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

  26. Picture of mosez
    mosez says:

    luvin’ it

  27. Picture of Artis
    Artis says:

    Keyboard stopped my jaw from dropping on to the floor. I am speechless.

  28. Picture of Steve Dennis
    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.

  29. Picture of Japerman
    Japerman says:

    Awesome! good job

  30. Picture of Steve Dennis
    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).

  31. Picture of Locuri de munca

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

  32. Picture of Steve Dennis
    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?

  33. Picture of James
    James says:

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

  34. Picture of baja
    baja says:

    GREAT STUFF!! ;)

  35. Picture of Steve Dennis
    Steve Dennis says:

    Thanks @Anders :)

  36. Picture of Bjørn
    Bjørn says:

    You Sir, are a genius.

  37. Picture of Andrei Zharau

    This is great! We all were so impressed!

  38. Picture of Robert
    Robert says:

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

  39. Picture of room34
    room34 says:

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

  40. Picture of Valentin
    Valentin says:

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

  41. Picture of Slei
    Slei says:

    Not bad :)

  42. Picture of nisha singh

    Good work @Steve Dennis

  43. Picture of memo
    memo says:

    That’s so awesome!!!

  44. Picture of Mohammad Koubeissi

    Amazing.

  45. Picture of Sven
    Sven says:

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

  46. Picture of Greisha
    Greisha says:

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

  47. Picture of Hitesh Chavda

    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.

  48. Picture of Steve Dennis
    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 :)

  49. Picture of Steve Dennis
    Steve Dennis says:

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

  50. Picture of berry__
    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.

  51. Picture of Steve Dennis
    Steve Dennis says:

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

  52. Picture of fimbim
    fimbim says:

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

  53. Picture of ferdy182
    ferdy182 says:

    Works on Android 2.2 too with animation! :D

  54. Picture of Jaik Dean
    Jaik Dean says:

    Excellent work! In IE5.5 it looks like a glitchy C64 rendering.

  55. Picture of Steve Dennis
    Steve Dennis says:

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

  56. Picture of MajorSparrow

    Excellent stuff, keep up the good work.

  57. Picture of Michel
    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!

  58. Picture of Matt Anderson

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

  59. Picture of faryl
    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.  :-)

  60. Picture of Jonathan
    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?

  61. Picture of Tyler
    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

  62. Picture of Zen Elements

    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

  63. Picture of Daniel warmth Delgadp

    Just amazing… can I be your padawan? lol

  64. Picture of Toine Branbergen

    Wow, awesome! Thats pure CSS3 art!:)

  65. Picture of witek
    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)

  66. Picture of Steve Dennis
    Steve Dennis says:

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

  67. Picture of Daniel warmth Delgado

    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

  68. Picture of bohwaz
    bohwaz says:

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

  69. Picture of Steve Dennis
    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 :)

  70. Picture of Daniel

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

    sometimes that pain is great to learn :) lol

  71. Picture of Daniel Hahler

    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/

  72. Picture of nick
    nick says:

    This should replace the Acid test

  73. Picture of David Elliott

    This is awesome and very well excuted. Rock on!

  74. Picture of Avocats Montreal

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

  75. Picture of KIDO
    KIDO says:

    Unbelievable!

  76. Picture of Marc Castles

    Madness!

  77. Picture of myymi
    myymi says:

    受教了,感谢!

  78. Picture of shashank
    shashank says:

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

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

  79. Picture of shashank
    shashank says:

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

  80. Picture of TheAL
    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

  81. Picture of Adam Eivy
    Adam Eivy says:

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

  82. Picture of Subrato Paul

    Excellent CSS innovation! The animation is so good on Google chrome.

  83. Picture of Webstandard-Team

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

  84. Picture of BRANKKO
    BRANKKO says:

    Great job!

  85. Picture of Ron
    Ron says:

    Its really cool!

  86. Picture of Antoine RJ Wright

    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.

  87. Picture of Darrell Banks

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

  88. Picture of zizo
    zizo says:

    looks good n nokia N900

  89. Picture of Simon
    Simon says:

    Wonderfull !

  90. Picture of климатици

    Wow. Amazing guys…

  91. Picture of Kobus
    Kobus says:

    *drooooooooool*

  92. Picture of Kobus
    Kobus says:

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

  93. Picture of Roy
    Roy says:

    Awesome…how did you do it??

  94. Picture of Gaurav Mishra

    Fuckin Fuckin Fuckin Orgasm

    You rock man!

  95. Picture of Stefan Stanica

    Well done man. Excellent!!!

  96. Picture of Daniel

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

  97. Picture of vijayraj
    vijayraj says:

    genius work

  98. Picture of Natasja
    Natasja says:

    Wow, respect!

  99. Picture of azul
    azul says:

    Hi, it is amazing view in Safari !!

  100. Picture of kalleboo
    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.

  101. Picture of Steve Dennis
    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.

  102. Picture of Helena
    Helena says:

    Super Awesome! Great job - very inspiring.

  103. Picture of Carmelo
    Carmelo says:

    Looks awesome - great job!

  104. Picture of FailTweet
    FailTweet says:

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

  105. Picture of Rilla
    Rilla says:

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

  106. Picture of Bartjan
    Bartjan says:

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

  107. Picture of Daniel
    Daniel says:

    haha love the IE version!

  108. Picture of wevdeb
    wevdeb says:

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

  109. Picture of kirtan
    kirtan says:

    This is Pure Awesome!!!

  110. Picture of Inwebdeveloper

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

  111. Picture of Jollson
    Jollson says:

    its coool..looks awesome

  112. Picture of Bryn
    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?

  113. Picture of Stacy
    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.

  114. Picture of Drum Boom
    Drum Boom says:

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

  115. Picture of Gaurav Mishra

    Just checked the whale in IE 6 also

    more look like a lego brick representation..

  116. Picture of bondaya
    bondaya says:

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

  117. Picture of Joe
    Joe says:

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

  118. Picture of nudel
    nudel says:

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

  119. Picture of Steve Dennis
    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!

  120. Picture of Matthys Bruno

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

  121. Picture of d13t
    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.

  122. Picture of d13t
    d13t says:

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

  123. Picture of Chi
    Chi says:

    Really impressive work

  124. Picture of Nicolas
    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.

  125. Picture of Steve Dennis
    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.

  126. Picture of Sheng
    Sheng says:

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

  127. Picture of Liena Aifen

    it’s really great css

  128. Picture of Joel
    Joel says:

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

  129. Picture of Selvam
    Selvam says:

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

  130. Picture of Chandan
    Chandan says:

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

  131. Picture of Hemanth
    Hemanth says:

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

  132. Picture of Matt
    Matt says:

    Impressive.  And it’s pretty cool to play with in Firebug to see how everything is working.

  133. Picture of Daniel R. H.
    Daniel R. H. says:

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

  134. Picture of tareq
    tareq says:

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

  135. Picture of Em
    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.

  136. Picture of PF
    PF says:

    Fantastic!

  137. Picture of Ardhian
    Ardhian says:

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

  138. Picture of Elizabeth Kaylene

    Very cool!

  139. Picture of 极限梦幻

    IE,网络进步的绊脚石。

  140. Picture of Dianso
    Dianso says:

    css3太强大了

    比如这个

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

  141. Picture of yukaizhao
    yukaizhao says:

    great work.

  142. Picture of ONEBOYS
    ONEBOYS says:

    “by hand, using trial and error. “

    I want to say 辛苦了 to you。Great work

  143. Picture of DesignFellow

    Great work..

  144. Picture of lsnail
    lsnail says:

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

  145. Picture of Stand
    Stand says:

    Man, you’re crazy…really congrats…

  146. Picture of Praful H
    Praful H says:

    Jaw dropped down to earths’ core!!!

  147. Picture of shaneshack

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

  148. Picture of surda
    surda says:

    对IE略有偏颇,用得都是webkit-、moz-类......

  149. Picture of Tim
    Tim says:

    Impressive!

  150. Picture of witek
    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 :(

  151. Picture of Aaron
    Aaron says:

    Very nice!

  152. Picture of Diseño de páginas web

    Wow exelente, esto esta de rompecocos. Buen trabajo !!

  153. Picture of Cindy
    Cindy says:

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

  154. Picture of Ben
    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!

  155. Picture of Harsha M V

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

  156. Picture of Anwerso
    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.

  157. Picture of izoel
    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 :)

  158. Picture of 56live
    56live says:

    damn good mate

  159. Picture of Chuck
    Chuck says:

    Holy crap. You’re insane. Oh, and quite awesome.

  160. Picture of Danijel Gajan

    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!

  161. Picture of Nirupam Burman

    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

  162. Picture of paula
    paula says:

    guauu, very good

    muyyy buenoo

  163. Picture of Matthew
    Matthew says:

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

  164. Picture of Asian Bridal Makeup
    Asian Bridal Makeup says:

    Amazing work, even looks good in IE lol.

  165. Picture of Moisha
    Moisha says:

    Works perfectly fine in IE9. Looking forward to it.

  166. Picture of SMS
    SMS says:

    Works in Safari 5 as expected

  167. Picture of frank
    frank says:

    That really looks great!

  168. Picture of Tice
    Tice says:

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

  169. Picture of Betty
    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.