Des outils pour créer des sprites CSS?
Existe-t-il de bons outils pour créer des sprites CSS?
IDÉALEMENT, 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 utiliser chacun 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 CSS Sprite dans le navigateur sur lequel je travaille. C'est vraiment rapide, mais n'a pas autant de fonctionnalités que certaines autres. Il ne fonctionne actuellement que dans Firefox ou Chrome, car il utilise JavaScript FileReader et HTML Canvas pour générer les sprites à l'intérieur du navigateur Web sans téléchargement.
Il y a maintenant Sprite Me de Steve Souders. L'essaye juste et il semble fonctionner assez bien.
Voici le lien http://spriteme.org/ et voici le billet de blog qui l’annonce.
Cela semble prometteur:
J'ai également trouvé cet article qui contient des informations utiles et même des commentaires de lecteurs qui méritent d'être lus.
Apparemment, la boîte à outils Web de Google a également quelque chose - donc si vous l'utilisez, cela pourrait valoir la peine d'être vérifié.
Essaye ça:
ZeroSprites est un générateur de sprites CSS destiné à la minimisation de la zone en utilisant des algorithmes de planchers VLSI.
trouvé celui-ci assez rapidement bien que cette limite de téléchargement de 500K puisse être pénible. le code source est disponible ici
Tontt est une application basée sur Adobe AIR qui fournit une interface facile pour créer de puissantes images CSS Sprites. Vous pouvez spécifier FiledWidth et FieldHeight ou trier les images.
Créer des images Sprites CSS avec Tonttu Desktop Tool
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;)
On ne sait pas encore si cela fera partie du framework ASP.NET de base, mais voici un projet de codeplex Microsoft pour csssprites:
http://aspnet.codeplex.com/releases/view/50869
si vous l'aimez - utilisez-le - ou tout simplement comme l'idée alors ajoutez un commentaire. Je pense que ce serait une bonne chose à avoir dans le cadre ASP.NET. Je ne l'ai pas utilisé personnellement (j'ai dû inventer la roue moi-même) mais elle a de bonnes critiques.
Il comprend les composants suivants:
- API pour générer automatiquement des sprites et des images en ligne
- Contrôles et assistants qui fournissent un moyen pratique d'appeler dans 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 mosaïque des images Sprite
- Fusion du CSS généré avec le propre CSS d'un utilisateur
Fonctionnalités à l'étude pour les futures versions:
- Sélection automatique de la couleur d'arrière-plan Sprite la plus efficace
- Réduire automatiquement le CSS rendu
- Compilation avec .NET 3.5
Compass CSS Framework a génération automatique de Sprite .
Pas une réponse directe mais à mes collègues développeurs et intégrateurs Web, envisagez simplement d'aligner chaque Sprite sur deux puissances; par exemple une grille de 16 pixels ou 32 pixels. Il facilite 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 le compressent très bien.
https://github.com/northpoint/SpeedySprite
Cet outil adopte une nouvelle approche en ce qu'il assemble vos 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, puis référencez les images que vous voulez dans votre code 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. Ne prend pas en charge le JPEG, mais PNG et GIF fonctionnent bien.
Il existe un nouvel outil appelé ActiveSprites, qui fait partie de la gemme active_assets.
Github: http://bitly.com/eRTwU4
Vous utilisez un Ruby dsl pour définir vos sprites, puis faites des "rake sprites" 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
Voici un script qui combine des images via un script Photoshop en sprites CSS . Il ne fera pas une carte Sprite comme vous l'avez demandé, mais il combinera des images par multiples de deux (2, 4, 8) si elles sont de la même taille. Je préfère combiner des images similaires (normal, survoler, sélectionné, parent de sélectionné) plutôt que d'avoir toutes les images dans un fichier.
Si vous aimez Java, vous pouvez utiliser GWT 1.5+ qui vient 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.
si vous utilisez Ruby on Rails, il existe une bibliothèque facile à installer pour générer des sprites css.
Aucun de ces outils ne répondait à mes exigences, donc j'en ai écrit un qui utilise la petite bibliothèque d'images de Mark Tylers, mtpixel (qui fait maintenant partie de mtcelledit ) Il n'est pas très étendu mais il est facilement extensible grâce aux fonctions intégrées de mtpixel qui incluent: niveaux de gris, inversion des couleurs, rotation, accentuation, 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 en tant qu'args (supporte png, gif et jpeg) et il produira un png rgb appelé Sprite.png avec les données utiles de découpage d'image vers stdout. Je l'utilise dans les scripts bash pour spritifier un répertoire entier d'images et produire 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 Puppy Linux seront ici:
http://murga-linux.com/puppy/viewtopic.php?t=82009
Mon cas d'utilisation ne nécessitait que d'épisser les images verticalement en un nouveau png, c'est donc 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 ko (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 texte, donc je commenté les bits de type libre dans la version statique)
n'hésitez pas à modifier selon vos 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;
}
Je vous suggère d'utiliser Sprite Master Web . Je génère automatiquement des feuilles Sprite et exporte du code CSS pour vous. Il essaie toujours de générer les plus petites feuilles Sprite avec des algorithmes avancés.
Voici une capture d'écran et vidéo youtube
j'ai récemment trouvé ces outils: SpriteRight http://spriterightapp.com/
SpriteRight est un générateur de feuilles de calcul 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.
Si vous utilisez .net, consultez http://www.RequestReduce.com . Non seulement il crée automatiquement le fichier Sprite, 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 Sprite à l'aide de la quantification et de la compression sans perte et il gère le service 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 web.config. Voir mon article de blog sur son adoption par la galerie d'exemples Microsoft Visual Studio et MSDN.