Lectures web
60
Divers articles, ressources, ...
Follow
Scooped by Agathe-Sevegrand onto Lectures web
Scoop.it!

Les picto fontes ou comment se simplifier la gestion des icones

Les picto fontes ou comment se simplifier la gestion des icones | Lectures web | Scoop.it
Ces petits éléments graphiques si chers à nos design sont essentiels, s'ils sont bien choisis ils apportent beauté et compréhension à l'expérience utilisateur de l'internaute. Le hic c'est qu'il est compliqué de les gérer pour un webmaster. Problèmes de résolutions d'écrans, de tailles, de couleurs, etc. Il faut sans cesse changer tel ou tel icone à tel ou tel endroit du site parce que tel autre picto ferait mieux l'affaire... Alors oui il y a bien les sprites css pour nous sauver la mise, cette technique consiste à mettre tous les pictos côte-à-côte dans une seule image puis d'assigner leur background-position x et y à des classes css qui sont elles-même ensuite appliquées aux éléments html de la page. Ainsi une balise aura son image de background positionnée pile sur la zone qui montre le picto "share". On peut ensuite changer la classe css par une autre pour afficher une autre icône, exemple : pour afficher une loupe, etc. Twitter Bootstrap dispose d'une bibliothèque d'icônes toute prête avec des classes css à placer sur vos balises html. De plus avec un bon générateur de sprite on peut encore un peu plus se faciliter la tâche. Personnellement j'aime faire mes sprites à la main dans Photoshop... je sais pas, ça me détend :P
No comment yet.
Agathe-Sevegrand is also curating
Responsive design & mobile first Nouvelles écritures et transmedia Accessibilité numérique Mes marottes 2013
Discover Topics Agathe-Sevegrand is following
formation 2.0 iPhone and iPad development Digital Delights - Images & Design Node.js Narration transmedia et éducation Social TV is everywhere
and 16 others
Your new post is loading...
Scooped by Agathe-Sevegrand
Scoop.it!

Microformats 2 - Alsacreations

Les Microformats, ça vous dit encore quelque chose ? Sinon, rendez-vous au tutoriel parlant des Microformats sur Alsacreations, vous pourrez combler cette lacune ;p (d'ailleurs pour être sûr d'avoir bien compris ce que vous avez appris, allez donc vous faire les dents sur le quiz Microformats).
No comment yet.