Monday, June 14th, 2010
Craziness with CSS: Animated Twitter Fail Whale
Category: CSS
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:
-
-
@-webkit-keyframes flutter1 {
-
0% { -webkit-transform:rotate(0deg) }
-
50% { -webkit-transform:rotate(-25deg) }
-
100% { -webkit-transform:rotate(0deg) }
-
}
-
-
.right .wing {
-
background: transparent !important;
-
z-index: 22 !important;
-
width: 15px;
-
height: 18px;
-
bottom: 4px;
-
left: 8px;
-
-webkit-animation: 'flutter1' 0.1s linear;
-
-webkit-animation-iteration-count: infinite;
-
}
-
Related Content:
I’m not sure “animated” applies, but it’s a great (ab)use of CSS. :D
How is this abuse of css?
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.
Twitter should change their fail page to this now. Awesome :)
So I opened this in Chrome and I’m getting 50% CPU usage… somebody was saying something about flash being a CPU hog?? ;)
@vale yeah I agree completely. I in no way endorse people thinking this would be viable for any kind of real world project :)