Des outils pour créer des sprites CSS? [fermé]

Existe-t-il de bons outils pour créer des sprites css?

IDEALEMENT, je voudrais lui donner un répertoire d'images et un fichier .css existant qui fait référence à ces images et lui faire créer une grande image optimisée avec toutes les petites images ET changer mon fichier .css pour faire référence à ces images.

Au moins, je voudrais qu'il prenne un répertoire d'images et génère un grand sprite et le .css nécessaire pour les utiliser comme arrière-plan.

Existe-t-il de bons plugins Photoshop ou des applications complètes pour le faire?

Cela fera 90% du travail pour vous: CSS Sprite Generator . Vous devrez toujours modifier les règles vous-même, mais l'outil vous donnera les fragments de code dont vous avez besoin pour le nouveau fichier CSS.

Instant Sprite est un générateur de sprites CSS intégré au navigateur sur lequel je travaille. C'est vraiment rapide, mais il n'a pas autant de fonctionnalités que certains des autres. Il ne fonctionne actuellement que dans Firefox ou Chrome, car il utilise JavaScript FileReader et HTML Canvas pour générer les sprites dans le navigateur Web sans téléchargement.

Il y a maintenant Sprite Me de Steve Souders. Essayez-le et cela semble fonctionner plutôt bien.

Voici le lien http://spriteme.org/ et voici le billet de blog l'annonçant.

http://www.stevesouders.com/blog/2009/09/14/spriteme/

Cela semble prometteur:

http://csssprites.org/

J'ai également trouvé cet article qui contient des informations utiles et même des commentaires de lecteurs qui valent la peine d'être lus.

Apparemment, la boîte à outils Web de Google a également quelque chose - donc si vous l'utilisez, cela vaut la peine de le vérifier.

Essaye ça:

http://spritepad.wearekiss.com/

ZeroSprites est un générateur de sprites CSS visant à minimiser la zone à l'aide d'algorithmes de planage VLSI.

trouvé celui-ci assez rapide, bien que la limite de téléchargement de 500K puisse être pénible. le code source est disponible ici

Tonttu est une application basée sur Adobe AIR qui fournit une interface simple pour créer de puissantes images CSS Sprites. Vous pouvez spécifier FiledWidth et FieldHeight ou trier les images.
Créer des images de sprites CSS avec l'outil de bureau Tonttu

On ne sait pas encore s'il sera intégré au framework ASP.NET principal, mais voici un projet Microsoft codeplex pour csssprites:

http://aspnet.codeplex.com/releases/view/50869

si vous l'aimez - utilisez-le - ou aimez simplement l'idée, ajoutez un commentaire. Je pense que ce serait une bonne chose à avoir dans le framework ASP.NET. Je ne l'ai pas utilisé personnellement (j'ai dû inventer la roue moi-même) mais il a obtenu de bonnes critiques.

Il comprend les composants suivants:

• API pour générer automatiquement des sprites et des images en ligne
• Contrôles et aides qui fournissent un moyen pratique d'appeler l'API

Fonctionnalités ajoutées dans la deuxième version:

• Un contrôle de liaison CSS pour les formulaires Web (sélectionne le fichier CSS approprié pour le navigateur de l'utilisateur, mais n'affiche pas d'image)
• Utilisation de chemins de dossier personnalisés autres que App_Sprites
• Modification de la direction de la mosaïque des images de sprite
• Fusion du CSS généré avec le propre CSS d'un utilisateur

Fonctionnalités à l'étude pour les versions futures:

• Sélection automatique de la couleur d'arrière-plan de sprite la plus efficace
• Réduire automatiquement le CSS rendu
• Compilation avec .NET 3.5

Utilisez simplement http://sprites.scherpontwikkeling.nl/ il peut également générer des sprites à partir des URL de sites Web ... vous pouvez intégrer vos sprites après avoir développé votre site Web. C'est très simple à utiliser;)

Pas une réponse directe mais à mes collègues développeurs et intégrateurs Web, envisagez simplement d'aligner chaque sprite sur des puissances de deux; par exemple une grille de 16 pixels ou de 32 pixels. Cela facilite grandement le calcul des décalages dans le fichier CSS. Tout l'espace blanc entre n'a pas d'importance car les formats gifd et png se compressent très bien.

Compass CSS Framework a une génération automatique de sprite .

Si vous aimez Java, vous pouvez utiliser GWT 1.5+ qui est livré avec quelque chose appelé " ImageBundle ". Le compilateur GWT gérera tous les détails désagréables pour vous. Vous n'aurez même pas à coder une seule ligne de JavaScript ou à écrire du CSS.

Voici un script qui combine des images via un script Photoshop dans des sprites CSS . Il ne fera pas de carte de sprite comme vous l'avez demandé, mais il combinera les images en multiples de deux (2, 4, 8) si elles sont de la même taille. Je préfère combiner des images similaires (normales, survolées, sélectionnées, parent de sélectionnées) que d'avoir toutes les images dans un seul fichier.

si vous utilisez ruby ​​sur rails, il existe une bibliothèque facile à installer pour générer des sprites css.

http://github.com/aberant/spittle

Il existe un nouvel outil appelé ActiveSprites, qui fait partie de la gemme active_assets.

Github: http://bitly.com/eRTwU4

Vous utilisez un dsl ruby ​​pour définir vos sprites puis faites des "sprites rake" et les sprites et les feuilles de style correspondantes sont générés.

C'est rad!

Voici un exemple de code,

# config/sprites.rb
Rails.application.sprites do
  sprite 'sprites/sprite1.png' => 'sprites/sprite1.css' do
    _'sprite_images/sprite1/1.png' => 'a.one'
    _'sprite_images/sprite1/2.png' => 'span.two'
  end
end

https://github.com/northpoint/SpeedySprite

Cet outil adopte une approche novatrice en ce sens qu'il assemble les images demandées à la volée en tant que service http. Cela rend l'ensemble du processus assez simple (aucun prétraitement requis, changez les images à tout moment): Vous démarrez le service et puis référencez les images que vous voulez dans votre HTML:

<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />

Parce qu'il est dynamique, vous pouvez même créer des sprites à partir d'un ensemble dynamique d'images telles qu'une page de vignettes. Cependant, ne prend pas en charge JPEG, mais PNG et GIF fonctionnent bien.

Je vous suggère d'utiliser Sprite Master Web . Je génère automatiquement des feuilles de sprite et exporte le code CSS pour vous. Il essaie toujours de générer les plus petites feuilles de sprite avec des algorithmes avancés.

Voici une capture d'écran et une vidéo youtube

Aucun de ces outils ne répondait à mes exigences, alors j'en ai écrit un qui utilise la minuscule bibliothèque d'images de Mark Tylers, mtpixel (qui fait maintenant partie de mtcell ) Ce n'est pas très complet mais il est facilement extensible grâce aux fonctions intégrées de mtpixel qui incluent: niveaux de gris, inversion des couleurs , rotation, netteté, quantification, postérisation, retournement (vertical et horizontal), transformation, rgb-> indexé, indexé-> rgb, détection de bord, gaufrage, dessin de polygones, texte et plus encore.

Tout ce que vous faites est de lui passer un ensemble d'images sous forme d'arguments (supports png, gif et jpeg) et il produira un png rgb appelé sprite.png avec les données utiles de découpage d'images vers stdout. Je l'utilise dans des scripts bash pour spritifier un répertoire entier d'images et générer les données de découpage pour la génération automatique de css (avec l'espoir de le rendre éventuellement capable de remplacer automatiquement les balises img existantes par un peu de sed / awk créatif)

Les packages binaires pour chiot linux seront ici:

http://murga-linux.com/puppy/viewtopic.php?t=82009

Mon cas d'utilisation ne nécessitait que l'épissage vertical des images dans un nouveau png, donc c'est tout ce qu'il fait, mais mon code source est du domaine public et la bibliothèque mtcelledit est gpl3. Avec mtpixel lié statiquement, le binaire est <100 kb (seulement quelques ko lorsqu'il est lié dynamiquement) et les seules autres dépendances sont libpng, libjpeg et libgif (et freetype avec le mtpixel officiel, mais je n'avais pas besoin du support de texte, donc je a commenté les bits freetype dans la construction statique)

n'hésitez pas à modifier pour vos propres besoins:

#include <stdlib.h> 
#include <stdio.h> 
#include <string.h> 
#include <mtpixel.h> 

int main( int argc, char *argv[] ){ 
int i=0,height=0,width=0,y=0; 
mtpixel_init(); 
mtImage *imglist[argc]; 
argc--; 
do{   imglist[i] = mtpixel_image_load( argv[i+1] ); 
   height+=imglist[i]->height; 
   if (imglist[i]->width > width) width=imglist[i]->width; 
} while (++i < argc); 
imglist[argc]=mtpixel_image_new_rgb(width,height); 
imglist[argc]->palette.trans=0; 
i=0; 
do{   if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED) 
      mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y); 
   else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y); 
   printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y); 
   y+=imglist[i]->height; 
   mtpixel_image_destroy( imglist[i] ); 
}while (++i < argc); 
   mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); 
mtpixel_quit(); 
return 0; 
}

Si vous utilisez .net, consultez http://www.RequestReduce.com . Il crée non seulement le fichier de sprite automatiquement, mais il le fait à la volée via un HttpModule avec la fusion et la réduction de tous les CSS. Il optimise également l'image du sprite à l'aide de la quantification et de la compression sans perte et gère la diffusion des fichiers générés à l'aide des en-têtes ETags et Expires pour assurer une mise en cache optimale du navigateur. La configuration est triviale impliquant juste un simple changement de web.config. Voir mon article de blog sur son adoption par la galerie d'exemples Microsoft Visual Studio et MSDN.

J'ai récemment trouvé ces outils: SpriteRight http://spriterightapp.com/

SpriteRight est un générateur de feuilles de sprites CSS pour Mac qui vous permet d'importer vos images ou feuilles de style existantes. Accélérez le chargement de vos sites, réduisez les coûts de bande passante et gagnez du temps. SpriteRight génère même du code CSS à la volée.