Le BlogDuWebdesign booste l’inspiration des intégrateurs #6

Aujourd’hui le Blog du Webdesign vous propose une liste d’inspiration et ressource pour commencer à utiliser le SVG

Connaissez-vous le SVG ? C’est un format d’image vectoriel que l’on peut utiliser dans le HTML. Il apporte au web tous les avantages du dessin vectoriel : Extrêmement léger, agrandissable à l’infini sans perdre de netteté, et enfin possibilité d’appliquer des filtres aux images. Cela produit parfois des résultats vraiment impressionnants quand cette technique est couple avec des animations CSS3.

Pour vous aider à commencer avec le Vectoriel dans vos documents HTML, voila une sélection de 10 créations vectorielles HTML.

Animation bluffante sur la gestion du focus

Effet shine au hover

Animation CSS3 mixée avec du SVG

Playground

En bonus, voila un petit lien expliquant la création des animations du site playground.

Un effet ambi-glow pour des images

Un loader illustrant les techniques de gradients

Icônes animés pour le climat en SVG et CSS3

Expérience sur les Keyframes

Un atlas en SVG

Une Pie CSS comme exemple d’animation

Quelques ressources pour démarrer :

Ut tuto par le W3School 

RaphaelJS

RaphaelJS est sans doute la lib jQuery la plus avance à l’heure actuelle pour travailler avec du Vectoriel. Pour vous aider à démarrer, je vous ai aussi mis un petit tutoriel gratuit.