Les outils pour sprites CSS? [fermé]
https://stackoverflow.com/questions/527336
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Y a-t-il des bons outils pour faire sprites css?
Je veux IDÉALEMENT donner un répertoire d'images et un fichier .css existant qui fait référence à ces images et l'ont crée une grande image optimisée avec toutes les petites images et changer mon fichier Css de se référer à ces images .
Au moins je voudrais qu'il prenne un répertoire d'images et de générer un grand sprite et le Css nécessaire d'utiliser chacun en arrière-plan.
Y a-t-il des bons plugins de Photoshop ou des applications entièrement soufflés à le faire?
La solution
Cela va faire 90% du travail pour vous: CSS Sprite Générateur . Vous aurez toujours besoin de 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.
Autres conseils
Sprite instantanée est un générateur de sprites CSS dans le navigateur je travaille. Il est très rapide, mais il n'a pas tout à fait autant de fonctionnalités que quelques-unes des autres. Il ne fonctionne actuellement que dans Firefox ou Chrome, car il utilise JavaScript et HTML Canvas FileReader pour générer les sprites dans le navigateur web sans les téléchargements.
Il est Sprite maintenant moi par Steve Souders. Juste essaye dehors et il semble fonctionner assez bien.
Voici le lien http://spriteme.org/ et est le blog annonçant ici il.
Cela semble prometteur:
J'ai aussi trouvé cet article qui a des informations utiles, et même certains commentaires des lecteurs méritent d'être lus.
apparemment aussi Google Web Toolkit a quelque chose -. Donc, si vous utilisez qu'il pourrait être utile de vérifier
Essayez ceci:
ZeroSprites est un générateur de sprites CSS visant à minimiser la zone en utilisant des algorithmes floorplaning VLSI.
trouvé celui-ci assez vite tho cette limite de téléchargement 500K pourrait être une douleur . le code source est disponible
Tonttu est application basée sur Adobe AIR, qui fournit une interface facile pour créer des images puissantes sprites CSS. Vous pouvez spécifier FiledWidth et FieldHeight ou trier les images.
Créer sprites CSS Images avec Tonttu outil de bureau
ne sait pas encore si ça va le faire dans le cadre d'ASP.NET de base, mais voici un projet CodePlex Microsoft pour csssprites:
http://aspnet.codeplex.com/releases/view/50869
si vous le souhaitez - l'utiliser - ou tout comme l'idée puis ajouter un commentaire. Je pense que ce serait une bonne chose d'avoir dans le cadre ASP.NET. Ont pas personnellement utilisé (je devais inventer la roue moi-même), mais ses bonnes critiques.
Il comprend les éléments suivants:
- API pour générer automatiquement les sprites et les images en ligne
- Commandes et aides qui offrent un moyen pratique d'appeler dans l'API
Fonctionnalités ajoutées en 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 ne présente pas une image)
- Utilisation des chemins de dossiers personnalisés autres que App_Sprites
- Changer la direction de mosaïque d'images sprite
- La fusion de la CSS généré avec le propre d'un utilisateur CSS
Caractéristiques à l'étude pour les futures versions:
- sélectionner automatiquement la couleur d'arrière-plan de l'image-objet le plus efficace
- minifying automatiquement le CSS rendu
- Compiler contre .NET 3.5
Il suffit d'utiliser http://sprites.scherpontwikkeling.nl/ il peut générer des sprites de site URL aussi bien ... vous pouvez intégrer vos sprites après le développement de votre site Web. Il est très facile à utiliser;)
Pas une réponse directe, mais à mes collègues développeurs et intégrateurs Web, il suffit de considérer l'alignement de chaque sprite aux pouvoirs de deux; par exemple, une grille de pixels 16 ou 32 pixels. Il fait le calcul des décalages dans le fichier CSS beaucoup plus facile. Tout l'espace blanc entre n'a pas d'importance que les formats de gifd et .png compressent très bien.
Compass Framework CSS a génération automatique de sprite .
Si vous aimez Java, vous pouvez utiliser GWT 1.5+ qui vient avec quelque chose appelé « ImageBundle ." Le compilateur GWT traitera tous les détails désagréables pour vous. Vous 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 sprites CSS . Il ne fera pas une carte de sprite que vous avez demandé, mais il combinera des images en multiples de deux (2, 4, 8) si elles sont de la même taille. Je préfère combiner des images similaires (normale, vol stationnaire, sélectionné, parent de sélectionné) que d'avoir toutes les images dans un seul fichier.
si vous utilisez Ruby on Rails, il est un outil facile à installer la bibliothèque pour générer sprites css.
Il y a un nouvel outil appelé là-bas ActiveSprites, une partie de la pierre précieuse de active_assets.
Github: http://bitly.com/eRTwU4
Vous utilisez un dsl rubis pour définir vos sprites, puis faire « râteau » sprites et les sprites et les feuilles de style correspondant se produit.
Il est rad!
Voici quelques exemples 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 prend une nouvelle approche en ce qu'elle rassemble vos images demandées à la volée en tant que service http. Cela rend le processus assez simple (sans pré-traitement nécessaire, changer les images en tout temps): Vous démarrez le service, puis faites référence à ce que 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 faire sprites à partir d'un ensemble dynamique d'images, comme une page de miniatures. Ne supporte pas JPEG bien, mais fonctionne PNG et GIF bien.
Je vous suggère d'utiliser Sprite Web Master . Je crée des ordres sprite automatiquement et les exportations code CSS pour vous. Il essaie toujours de générer des plus petites feuilles de sprites avec des algorithmes avancés.
Voici une capture d'écran et vidéo youtube
Aucun de ces outils a répondu à mes exigences, j'ai donc écrit un qui utilise minuscule bibliothèque d'images de Mark Tylers, mtpixel (maintenant partie de mtcelledit ) Il est pas super vaste, mais facilement extensible grâce à mtpixel intégré de fonctions qui comprennent: niveaux de gris, inversion des couleurs, rotation, netteté, Quantification, postériser, feuilles mobiles (verticale et horizontale), transformer, RVB-> indexé, indexed-> rgb , de détection de front, gaufrage, polygones dessin, du texte et plus.
Tout ce que vous faites est de passer une série d'images que args (prend en charge png, gif et jpeg) et il affichera un rgb appelé .png sprite.png ainsi que les données de découpage d'images utiles à stdout. Je l'utilise dans les scripts bash pour spritify un répertoire entier d'images et de sortie des données de découpage pour la génération automatique de css (avec l'espoir de finalement rendre capable de remplacer les balises existantes img automagiquement avec un peu de sed / awk créatif)
Les paquets binaires pour Linux chiot sera ici:
http://murga-linux.com/puppy/viewtopic.php? t = 82009
Mon cas d'utilisation épissage nécessaire que les images verticalement dans une nouvelle .png, de sorte que 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 Ko (seulement quelques kb quand dynamiquement liée) et les seules autres dépendances sont libpng, libjpeg et libgif (et freetype avec le mtpixel officiel, mais je n'ai pas besoin du soutien de texte, donc je commentaires sur les bits de freetype dans l'accumulation d'électricité statique)
ne 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. Non seulement crée le fichier sprite automatiquement, mais il le fait à la volée par un HttpModule avec la fusion et minifying tous les CSS. Il optimise LSO l'image de sprite en utilisant la compression de quantification et sans perte et il gère la portion des fichiers générés en utilisant les en-têtes ETag et pour assurer la mise en cache Expires optimale du navigateur. La configuration est trivial impliquant un simple changement web.config. Voir mon blog sur son adoption par le Microsoft Visual studio et galerie d'exemples MSDN.
Je trouve récemment cet outil: SpriteRight http://spriterightapp.com/
SpriteRight est un générateur de spritesheet CSS pour le Mac qui vous permet d'importer vos images ou existantes stylesheets. Faire vos sites se chargent plus rapidement, de réduire les coûts de bande passante et de gagner du temps. SpriteRight génère même code CSS à la volée.
