Group items tagged

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: PLAIN TEXTCSS:@-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;}