Dessiner avec les canvas html5
Le html5 inaugure une nouvelle balise <canvas> permettant d’intégrer des zones graphiques en 2 ou 3 dimensions dans le corps des pages. Pour le moment gérée par une poignée de navigateurs récents (dont Safari, Chrome, Opera et Firefox), elle laisse entrevoir de belles opportunités en termes de design et de graphisme. Il est en effet possible d’y « dessiner » en utilisant les nombreuses possibilités offertes par CSS3 : formes complexes, transparence, dégradés, calques….
En se substituant à des images simples, la balise html canvas (en dessin 2D) permet de limiter le nombre de requêtes http exécutées au chargement d’une page, et donc d’en accélérer la vitesse d’affichage. On peut imaginer que dans un futur proche, les logos de sites et autres éléments faisant partie intégrante de la charte graphique seront chargés dans des balises canvas, directement depuis le fichier CSS. On comprend pourquoi Google promeut la technologie !
Afin de tester les possibilités offertes par ce nouvel élément canvas, plusieurs graphistes et web-designers se sont amusés à créer des illustrations plus ou moins travaillées. On retrouve notamment des personnages et des logos de navigateurs web. Pour un début, certaines créations sont tout simplement bluffantes… Voici une liste des plus réussies d’entre elles :
- Dragon par Smashingmagazine ;
- Doraemon par ShopDD ;
- Homer Simpson par Roman Cortes ;
- iPod par AdmixWeb ;
- Logo IE par Andreas Jacob ;
- Logo Opera par David Dessndro…
Si ces dessins en canvas html5 et CSS3 sont pour le moment dessinés minutieusement (et longuement) par de talentueux graphistes, je suis prêt à parier que des logiciels voire des services web permettront prochainement d’en générer à partir d’images classiques ou en mode édition. Photoshop pourrait par exemple proposer un enregistrement dans ce format. Avec la montée en puissance des navigateurs « CSS3 compliant », la balise canvas a de beaux jours devant elle ! N’hésitez pas à proposer d’autres exemples sympas via les commentaires ;)
Une très bonne présentation technique du dessin en canvas : http://www.slideshare.net/robhawkes/html5-canvas-the-future-of-graphics-on-the-web
Vraiment très impressionnant ! Mais, doit-on laisser de côté le navigateur IE toutes versions confondues pour toutes ces nouvelles avancées dans le monde du web ?
Un article sur ce sujet Mr Eroan :p ?
Il faut utiliser des hacks CSS pour proposer une alternative en image pour tous les navigateurs qui ne le prennent pas en compte. C’est relativement simple ;)