full

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 !

large

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.

source




5 commentaires

  1. @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 >> 😉

  2. 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.

  3. Bonjour,
    L’outil est intéressant, mais je pense qu’il ne faut pas y mettre de normes.
    Je pense que le principal intérêt du css, c’est qu’il ne peut pas être analysé par les machines, chacun s’exprime à sa manière sur plusieurs niveaux et comme les machines ne savent que comparer, elles ne peuvent faire d’analyse car cela demande de l’entendement.
    Je travaille actuellement sur ce type de réalisation en css mais j’ai encore pas mal de chemin à faire:
    http://www.letime.net/alpha/dessin/alerte.html
    Cordialement


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *