Que la force soit avec vous… et avec CSS3 !

11 juillet 2011

Kris Triplett, un développeur et webdesigner californien, nous propose deux créations de l’univers Star Wars réalisées uniquement avec du HTML et du CSS, en particulier quelques propriétés CSS3 : Dark Vador et un Stormtrooper !

CSS3, le côté lumineux…

Dark Vador et un Stormtrooper en pure CSS

Décidemment, les webdesigner n’en ont pas fini avec CSS3 ! Dessiner avec une feuille de style, c’est possible grâce aux propriétés CSS3. Il s’agit d’une succession de « div » qui sont placées en « absolute » et transformées via du CSS pour donner l’illusion d’une image. Quelques caractères de police sont également utilisés.

  • Border Radius permet d’arrondir les coins d’une bordure d’un élément HTML.
    -webkit-border-radius: 200px 200px 0 0;
    -moz-border-radius: 200px 200px 0 0;
    border-radius: 200px 200px 0 0;
    
  • Rotate permet d’appliquer une rotation sur un élément HTML.
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    
  • Matrix permet d’appliquer une matrice de transformation sur un élément HTML.
    -webkit-transform: matrix(1, -1.12, 0, 1, 0, 0);
    -moz-transform: matrix(1, -1.12, 0, 1, 0, 0);
    -o-transform: matrix(1, -1.12, 0, 1, 0, 0);
    
  • Translate permet d’appliquer une translation sur un élément HTML.
    -webkit-transform: rotate(28deg) translateX(1px);
    -moz-transform: rotate(28deg) translate(1px);
    -o-transform: rotate(28deg) translate(1px);
    

…et le côté obscur

L’inconvénient majeur de CSS3 reste la compatibilité. Rappelons que CSS3 est une technologie future, qui n’est toujours pas officialisée par le W3C, et son implémentation dans les navigateurs est donc marginale. On peut quand même constater que l’affichage des deux personnages de Star Wars fonctionne avec les navigateurs récents qui utilisent les moteurs Gecko (Firefox), Webkit (Chrome et Safari) et Presto (Opera). Quelques légères différences entre les navigateurs subsistent mais résultat est tout aussi impressionnant.

Quoi qu’il en soit, il faut souligner ce superbe travail qui ravira les fan de l’univers Star Wars.

Requis : navigateur compatible CSS3
Démonstration : http://kristriplett.com/tinker/vader.htmlhttp://kristriplett.com/tinker/trooper.html
Licence : libre

Commentaires