Les propriétés CSS et CSS3 autorisent la création d’une multitude d’effets et de formes. Il est désormais possible de créer des icônes, des pictogrammes, des glyphes en quelques lignes de code. Le tout sans le recours à des images ou des scripts.
Pourquoi s’en priver. Dans cet article, vous trouverez des icônes gratuites en pure CSS et des nouvelles expériences de création en CSS3 à base d’icônes SWeb et fraîches.
Des effets auparavant réalisables uniquement via un logiciel peuvent être générés directement dans le navigateur. La rapidité d’affichage est ainsi augmentée et les requêtes serveur diminuées. Jugez-en par vous même en téléchargeant les nombreux kits gratuits d’icônes disponibles ci-dessous.
Social switchbook
Un nuancier créé entièrement en CSS. Les icônes sont générées à partir de FontAwesome. Un bel essai de transform rotate.
Réalisée en un seul élément.
Icône PlayStation
A vos manettes de Play CSS, la partie commence…
Vintage, old school, c’est comme vous voulez mais le rendu est exceptionnel.
Le logo de la plateforme de blogging Blogger en CSS.
Icône Mail avec un rendu 3D.
Une icône d’application iOS de la célèbre Gameboy de Nintendo.
Icône email en CSS, simple et efficace.
Une très belle réalisation d’un timer de cuisson en CSS.
Boutons et icônes CSS
L’icône Gmail en CSS3 composée d’un seul élément grâce aux propriétés :after et :before.
L’icône Nouveau fichier de l’éditeur Notepad++ uniquement en CSS.
Icône sphère animée
La sphère terrestre est générée via l’emploi des data URI. Donc pas d’appel d’image. J’ai découvert il y a quelques jours un fabuleux outil afin de générer ses propres data URI à partir d’une image : duri.me.
Un nuage + de la CSS = une icône.
Icônes CSS3 monochromes
Un ensemble de 85+ icônes et glyphes gratuits créés en CSS3.
Icônes terminaux mobiles
Un pack d’icônes en CSS inspirées du site iconmonstr.com/.
Kit pictogrammes CSS3 Peculiar
Un package de pictogrammes gratuits conçus uniquement en CSS. Créés pour convenir aux sites et applications Web nécessitant un minimum de requêtes HTTP ou ne pouvant pas contenir d’images. Le pack contient 45 pictogrammes de 16px. Si vous souhaitez développer des projets pour les écrans Retina iPhone 4s, iPhone 5 et iPad, ces pictos sont faits pour vous. Plus besoin de Photoshop pour les Webdesigners et les développeurs seront ébahis des performances d’affichage.
Icônes en pure CSS3
Une suite d’icônes social media en pure CSS3. Les chartes graphiques sont un peu vieillissantes mais elles constituent une très bonnes bases de travail pour les rendre tendances.
GUI Icônes Pure CSS
84 icônes pour vos interfaces graphiques réalisées en CSS et HTML en utilisant les pseudo-éléments.
UI navigation CSS3 + icônes
Une série d’icônes en CSS3 incorporées à une barre de navigation fun.
Icônes iOS
Pas d’images, uniquement de la CSS pour ces magnifiques icônes iOS.
Social media icônes en pure CSS
Aucune image, aucun JavaScript, un simple zeste de CSS.
Rather Splendid – icônes CSS
Un partage d’expérience sur la réalisation d’un ensemble d’icônes en CSS utilisant intelligemment les border-radius.
Créer une icône document en CSS3
Tutoriel vous présentant en détail la création d’une icône en pure CSS3.
42 boutons en CSS
Un ensemble de boutons en CSS accompagnés d’icônes.
