La baleine échouée de Twitter en CSS3

2 mai 2011

Si vous utilisez Twitter, vous connaissez sans doute le Fail Whale, cette baleine échouée dessinée par Yiying Lu, qui est tractée par des oiseaux lorsque le site Twitter est indisponible. Steve Dennis, un webdesigner néo-zélandais, s’est exercé à reproduire le dessin uniquement avec des propriétés CSS.

Une expérience en CSS

Voici ce que vous obtiendrez en visualisant la création avec un navigateur compatible CSS3. Si vous utilisez un navigateur qui utilise le moteur Webkit (Safari ou Chrome), les oiseaux et les vagues seront même animés grâce à la propriété CSS3 webkit-animation.

Comment ça marche ?

La création est un empilement de « div » qui se cachent les unes derrière les autres avec la propriété « overflow:hidden » pour laisser apparaitre uniquement les parties qui doivent être affichées. Les courbes sont générées via la propriété CSS3 border-radius qui permet de générer des coins arrondis sur des éléments HTML.

-moz-border-radius: 220px/235px;
-webkit-border-radius: 220px 235px;
border-radius: 220px/235px;

Et les animations sont possibles grâce aux keyframes CSS3 qui fonctionnent seulement sur les navigateurs utilisant -webkit.

@-webkit-keyframes flutter1 {
	0%   { -webkit-transform:rotate(0deg) }
	50%  { -webkit-transform:rotate(-25deg) }
	100% { -webkit-transform:rotate(0deg) }
}

@-webkit-keyframes flutter2 {
	0%   { -webkit-transform:rotate(0deg) }
	50%  { -webkit-transform:rotate(25deg) }
	100% { -webkit-transform:rotate(0deg) }
}

Et Internet Exporer ?

Sur Internet Explorer 8 (et moins), la baleine semble belle et bien échouée.

Requis : navigateur compatible CSS3
Démonstration : http://www.subcide.com/experiments/fail-whale/
Licence : libre

Commentaires