Monday, June 14th, 2010

Craziness with CSS: Animated Twitter Fail Whale

Category: CSS

<p>

Developers continue to do crazy things to show us what can be done with CSS3. The latest is a fully animated Twitter fail whale by Steve Dennis:

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.

Take a look at the source to see the mass of code such as:

  1. @-webkit-keyframes flutter1 {
  2.   0%   { -webkit-transform:rotate(0deg) }
  3.   50%  { -webkit-transform:rotate(-25deg) }
  4.   100% { -webkit-transform:rotate(0deg) }
  5. }
  6.  
  7. .right .wing {
  8.   background: transparent !important;
  9.   z-index: 22 !important;
  10.   width: 15px;
  11.   height: 18px;
  12.   bottom: 4px;
  13.   left: 8px;
  14.   -webkit-animation: 'flutter1' 0.1s linear;
  15.   -webkit-animation-iteration-count: infinite;
  16. }

Related Content:

Posted by Dion Almaer at 7:10 am
6 Comments

++++-
4 rating from 2 votes

6 Comments »

Comments feed TrackBack URI

I’m not sure “animated” applies, but it’s a great (ab)use of CSS. :D

Comment by MichaelThompson — June 14, 2010

How is this abuse of css?

Comment by meandmycode — June 14, 2010

Nice demo. I think though, that demos like these mislead people that CSS can be used for serious work with vector graphics. Creating the graphics displayed in the demo in Adobe Illustrator and published as an SVG graphics is much faster, straightforward and maintainable. Good luck doing complex vector graphics using hand written CSS. CSS was not designed for this.

Comment by vale — June 14, 2010

Twitter should change their fail page to this now. Awesome :)

Comment by gautamkishore — June 14, 2010

So I opened this in Chrome and I’m getting 50% CPU usage… somebody was saying something about flash being a CPU hog?? ;)

Comment by iliad — June 14, 2010

@vale yeah I agree completely. I in no way endorse people thinking this would be viable for any kind of real world project :)

Comment by Subcide — June 14, 2010

Leave a comment

You must be logged in to post a comment.