Tools zum Erstellen von CSS-Sprites?

Dies machen 90% der Arbeit für Sie: http://spritegen.website-performance.org/. Dennoch müssen Sie zum Bearbeiten der Regeln selbst, aber das tool wird Ihnen die code-Fragmente, die Sie für die neue CSS-Datei.

InformationsquelleAutor der Antwort Sophie Alpert

Gibt es jetzt Sprite Mir von Steve Souders. Gerade versucht es heraus, und es scheint ziemlich gut zu funktionieren.

Hier ist der link http://spriteme.org/ und hier ist der blog-post kündigt es.

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

InformationsquelleAutor der Antwort Jauder Ho

Versuchen Sie dies:

http://spritepad.wearekiss.com/

InformationsquelleAutor der Antwort Ivin

fand dieses ziemlich schnell tho, 500K upload-limit könnte ein Schmerz sein. source-code verfügbar ist, hier

InformationsquelleAutor der Antwort Scott Evernden

Noch nicht klar, ob es bis in den Kern ASP.NET Rahmen, aber hier ist eine von Microsoft codeplex-Projekt für csssprites :

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

wenn Sie es wollen - verwenden - oder einfach nur die Idee gefallen, dann fügen Sie einen Kommentar hinzu. Ich denke, das wäre eine tolle Sache in der ASP.NET Rahmen. Nicht persönlich verwendet es (ich hatte das Rad zu erfinden mich) aber die hat gute Bewertungen.

Es umfasst die folgenden Komponenten:

• API für die automatische Generierung von sprites und inline-Bilder
• Kontrollen und Helfer, die bieten eine bequeme Möglichkeit zum aufrufen der API

Funktionen Hinzugefügt, im Zweiten Release:

• Eine CSS-Verlinkung Kontrolle für Web-Formulare (wählt die richtige CSS-Datei für den browser des Benutzers, aber nicht ein Bild anzuzeigen)
• Mithilfe benutzerdefinierter Ordner-Pfade andere als App_Sprites
• Ändern Sie die Fliesen Richtung von sprite-Bildern
• Zusammenführung der generierten CSS-Datei mit einem user eine eigene CSS -

Funktionen unter Berücksichtigung für zukünftige Versionen:

• Automatische Auswahl der effizientesten sprite-hintergrund-Farbe
• Automatisch minifying der gerenderten CSS -
• Kompilieren gegen die .NET 3.5

InformationsquelleAutor der Antwort Simon_Weaver

Nicht eine direkte Antwort, aber zu meiner anderen Entwicklern und web-Integratoren, sollten Sie einfach ausrichten jedes sprite um Potenzen von zwei, zB ein 16 pixel oder 32-pixel-raster. Es macht die Berechnung von offsets in der CSS-Datei viel einfacher. Alle Leerzeichen zwischen nicht egal, wie die gifd-und png-Format komprimieren, sehr gut.

InformationsquelleAutor der Antwort

Wenn Sie mögen Java, dann können Sie mit GWT 1.5+, der kommt mit etwas namens "ImageBundle." Der GWT-compiler wird mit allen fiesen details für Sie. Sie müssen noch nicht einmal-code eine einzelne Zeile JavaScript schreiben oder irgendwelche CSS.

InformationsquelleAutor der Antwort Aaron Digulla

wenn Sie mit ruby, ruby on rails, es ist ein einfach zu installieren-Bibliothek zum erstellen von css-sprites.

http://github.com/aberant/spittle

InformationsquelleAutor der Antwort aberant

https://github.com/northpoint/SpeedySprite

Dieses tool nimmt eine neuartige Methode, die es werden dort Ihr Wunsch-Bilder on-the-fly als http-service. Dies macht den gesamten Prozess ziemlich einfach (keine Vorverarbeitung erforderlich, ändern Sie die Bilder jeder Zeit): starten Sie den Dienst und klicken Sie dann verweisen Sie, was auch immer Bilder, die Sie wollen in Ihrem HTML:

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

Weil es ist dynamisch, man kann ja auch sprites aus einer dynamischen Gruppe von Bildern, wie eine thumbnail-Seite. Keine Unterstützung für JPEG, aber PNG und GIF funktioniert einwandfrei.

InformationsquelleAutor der Antwort Magnus

Keines dieser tools erfüllt genau meine Anforderungen, also schrieb ich eine mit Mark Tylers kleinen, Bild-Bibliothek, mtpixel (jetzt Teil von mtcelledit)
Es ist nicht super umfangreich, aber es ist leicht erweiterbar durch mtpixel built-in-Funktionen, die Folgendes beinhalten: Graustufen, Farbe inversion, rotation, schärfen, Quantisierung, posterize, spiegeln (vertikal und horizontal), wandeln, rgb->indizierte, indiziert->rgb, Rand erkennen, Relief, Zeichnung, Polygone, text und mehr.

Alles, was Sie tun ist, übergeben Sie eine Reihe von Bildern als args (unterstützt png, gif und jpeg), und es erfolgt die Ausgabe einer rgb-png-namens sprite.png zusammen mit dem nützlichen Bild-slicing-Daten auf die Standardausgabe. Ich benutze es in bash-Skripte, um spritify ein ganzes Verzeichnis von Bildern und Ausgabe der slicing-Daten für die automatische Generierung von css (mit der Hoffnung, schließlich macht er in der Lage, den Ersatz bestehender img-tags automatisch mit ein bisschen kreativer sed/awk)

Binär-Pakete für puppy linux wird hier:

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

Meine nur erforderlich Spleißen die Bilder vertikal in einer neuen png-Datei, so dass alle es tut, aber mein Quellcode ist public domain und die mtcelledit Bibliothek ist gpl3. Mit mtpixel statisch gelinkt, das binary ist <100 Kb (nur ein paar kb, wenn dynamisch gelinkt) und die anderen Abhängigkeiten sind, libpng, libjpeg und libgif (und freetype mit der offiziellen mtpixel, aber ich wusste nicht, müssen Sie den text unterstützen, so dass ich auskommentiert das freetype-bits in den static build)

fühlen Sie sich frei zu ändern für Ihre eigenen Bedürfnisse:

#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; 
}

InformationsquelleAutor der Antwort technosaurus

ich habe vor kurzem finden diese tools : SpriteRight
http://spriterightapp.com/

SpriteRight ist ein CSS spritesheet generator für den Mac, können Sie importieren Sie Ihre vorhandenen Bilder oder stylesheets. Ihre Seiten schneller laden, schneiden, Bandbreite, Kosten und Zeit zu sparen. SpriteRight selbst generiert CSS-code auf die fliege.

InformationsquelleAutor der Antwort prestarocket