Comment créer rapidement la feuille de style CSS d’une Sprite ?

Publié le 17 février 2011 - Outils Webmasters, Webdesign. Tags : , ,

Le réponse : SpriteBox, un outil pouvant s’avérer bien pratique pour créer rapidement des CSS Sprites. L’idée : vous fabriquez votre Sprite sous Photoshop ou autre logiciel de retouche d’image, et cet outil vous permet de créer la CSS qui va avec en ligne.

En clair :

  1. Chargez votre image sur SpriteBox via votre ordinateur ou une URL afin de la rendre disponible à l’édition,
  2. Créez une zone selon vos besoins (vous pouvez zoomer pour plus de précision), donnez-y un nom, définissez des propriétés annexes, puis créez la class ou l’ID CSS,
  3. Répétez l’opération autant de fois que nécessaire, puis générez votre feuille de style
  4. Le tour est joué !

Une idée sympathique et réellement bien mise en œuvre, qui permettra sans doute a certain nombre de webmasters/webdesigner débutant avec les sprites à s’en sortir plus rapidement. Pour ma part je préfère tout créer moi même en local, grâce à Photoshop (repères X et Y pour définir les background-position négatifs) et mon bloc note CSS). Une bonne adresse néanmoins, qui vaut bien un petit bookmark sur ce blog.


Articles sur ce thème :