All posts tagged ‘Fail Whale’

File Under: CSS

Twitter Fail Whale Rendered in Pure CSS

Here’s Twitter’s unofficial mascot drawn solely using cascading stylesheets, by Subcide’s Steve Dennis. What you see above is just an image — read Steve’s post or jump straight to the demo to see the real thing.

It looks great in all modern browsers (basically, everything newer than IE8) and if you look at it in Safari or Chrome, you’ll notice it’s even animated using WebKit-specific CSS animation controls.

From his blog post: “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.” Hardly a waste, Steve.

See Also: