Des icônes libres en CSS full patate !
Bonjour 
Aujourd’hui pour vos sites internet et avec touuuus les supports différents, les résolutions, les tablettes, les téléphones, les écrans rétinas, etc. il faut souvent prévoir plusieurs résolutions d’images. Alors certes il existe le SVG (du dessin vectoriel qui passe sur le web en quelque sorte) mais dorénavant avec le CSS, il est possible de faire des choses assez incroyables comme ces icônes en full css par exemple !
L’idée de tout ceci est également de mettre en évidence le potentiel de CSS3 grâce à une bibliothèque d’icônes assez épurées. Tous éléments sont réalisés en pur CSS avec une seule div html. L’enjeu est aussi de fournir une alternative au format SVG et elle peuvent conserver leur précision et même être redimensionnées.
À noter que ces icônes ont également l’avantage de pouvoir être animées ou d’être interactives. Le site dans lequel se trouve ces icônes insiste également sur l’aspect communautaire en fournissant aux membres la possibilité de soumettre leurs propres créations afin qu’elles soient validées plus tard pour apparaître sur le site.
Ces articles peuvent aussi vous intéresser:
- Quand votre téléphone connait mieux le monde qui vous entoure que vous.
- Vendredi c’est Graphism.. spécial HTML5 !
- « Dead End Thrills », un superbe hommage graphique aux jeux vidéo.
- - Mon actu de graphiste -
- Découvrez WIX.com, éditeur en ligne de sites en html5 et en flash
- Le nouveau site de la SNCF… oui…MAIS !
11 janvier 2013 à 12 h 03 min
Je crois que l’un des défaut de ce procédé est d’alourdir la page. Dur dur dilemme de choisir l’image ou le css dans ces cas là.
11 janvier 2013 à 14 h 10 min
@qwerty: c’est plus léger qu’une typo, qu’un SVG et qu’une image. Donc ça n’alourdi pas la page. Seul problème : la compatibilité.
C’est techniquement super impressionnant !
Par contre quand on télécharge le ZIP ça ne marche pas ^^’
btw ce sont des pictos et non des icones >>
11 janvier 2013 à 14 h 35 min
belle prouesse css !
@qwerty, alourdir la page dans quel sens ? c’est pas dit que quelques lignes de css soient plus lourdes que des pictos png..
Je pense au contraire que ça favorise l’optimisation des pages en réduisant le nombre de requêtes serveur (pas d’images à charger). Après c’est sûr que ça fait travailler un peu le navigateur qui doit générer les rendus.
Le principal inconvénient est bien sur que les icônes n’auront pas le même rendu d’un navigateur à l’autre, voir seront totalement cassées.
30 janvier 2013 à 21 h 26 min
Et pourquoi pas pousser le principe encore plus loin et imaginer une typographie en CSS?…
http://www.quaternum.net/2013/01/30/une-typographie-en-css/