Vous utilisez certainement déjà les sprites CSS sur votre site. Cette technique qui consiste à regrouper un ensemble de petits éléments visuels dans un même fichier afin d'y faire référence de manière uniforme et d'épargner des requêtes multiples au serveur n'est pas des plus agréables à mettre en place. En effet, il faut calculer les dimensions des zones à afficher et leurs coordonnées, puis exploiter la propriété background-position en CSS pour "décaler" la vue au bon emplacement.
CSS Sprite Generator est destiné à vous faciliter la tâche en combinant différentes images fournies dans une archive zip en un seul assemblage.
A l'inverse, Sprite Creator simplifie la découpe virtuelle car il suffit de tracer une zone de sélection autour du sprite que l'on souhaite utiliser dans la feuille de style pour obtenir les instructions CSS.
Stitches, rend la tâche encore plus aisée par drag & drop avec une interface en HTML5.
Pour en savoir plus au sujet des sprites :
- Article d'A List Apart par Dave Shea : CSS Sprites: Image Slicing’s Kiss of Death
- Traduction par Pompage : Sprites CSS : Meurs, découpe d’images, meurs !
- La recommandation de Nicole Sullivan
Commentaires
Super utile !
Merci pour l'info.
Trop bien !!! C'est vrai que (par flemme ;0p ), je n'utilise pas trop cette technique mais quelque chose me dit que ça va m'inciter à changer mes habitudes.
Merci pour l'info.
Le logiciel IconWorkshop, payant avec mise à jour gratuite à vie est à voir aussi. Il permet de modifier la position des images dans l'image strip rapidement, possède une bibliothèque d'icônes et il est un super éditeur d'icônes et d'images.
Pour découper ses sprites, il y a aussi YASC (Yet Another Sprite Editor) : http://www.lecentre.net/fratoblog/yasc/