Archive pour juillet 2011

HTML5 vs CSS3 pour dessiner

Dimanche 10 juillet 2011

Exercice de comparaison entre HTML5 et CSS3 pour dessiner dans une page web. J’ai repris le petit blob réalisé il y a maintenant 1 an et demi et je l’ai passé à la sauce canvas. Voici le résultat

Réaliser des dessins avec uniquement du CSS3, c’était déjà bien amusant et permettait de faire simplement des animations avec une petite couche de js.

Avec l’élément canvas on passe encore à la vitesse supérieure, car avec cette balise on entre encore dans une autre dimensions. A la fois plus simple car en quelques lignes on réalise des formes très complexes, et plus compliqué car il va falloir se replonger un peu dans ces cours de maths, pas bien méchant mais quand même.

En temps, je pense même avoir été plus vite à réaliser la version HTML5, alors que c’était mon premier vrai exercice.
Voici le résultat : HTML5 vs CSS3

Quelques techniques utilisées ici avec la balise canvas :

  • Dessiner des rectangles
  • Dessiner des cercles et arcs
  • Faire des dégradés linéiares et radiaux
  • Réaliser des courbes et d’autres formes plus complexes
  • Et faire des masques de formes (comme pathfinder d’Illustrator)

Et ceci n’est qu’une petite partie des possibilités.

Pour le moment ces dessins sont statiques, mais très facilement il est possible d’animer ces éléments.

N’hésitez plus et amusez-vous avec la balise canvas, je vous recommande le livre de Rob Hawkes : Foundations HTML5

Have fun!