Mit diesem Werkzeug können Sie CSS Sprites automatisch erstellen. Alles, was Sie machen müssen ist eine Zip Datei mit zwei oder mehr Bildern im GIF, JPG oder PNG Format hochzuladen. Das Werkzeug erstellt für Sie das zusammengefügte Bild und die dazugehörige CSS Regeln um jedes einzelne Teilbild anzuzeigen.

Optionen

Sie können die Art und Weise wie das Werkzeug das Bild und die CSS Informationen erstellt mit mehreren Optionen Ihren Bedürfnissen anpassen. Diese Optionen sind die folgenden:

Ursprungsbilder vergrößern oder verkleinern

Breite und Höhe
Wenn Sie entweder die Breite oder die Höhe als weniger von 100% angeben werden die Bilder dementsprechend vergrößert oder verkleinert. Werte über 100% sind nicht erlaubt da die Bildqualität leiden würde. Die Voreinstellung ist 100% was bedeutet daß die Bilder nicht verändert werden.

Doppelte Bilder

Doppelte Bilder ignorieren
Doppelte Bilder werden in das Endbild eingefügt und für jedes eine eigene CSS Regel erstellt.
Doppelte Bilder entfernen und CSS Klassen zusammenfügen
Das Werkzeug vergleicht die Bilder mittels MD5 um sicherzustellen das es sich wirklich um Duplikate handelt. Diese werden entfernt und die CSS Regeln in einen Selektor zusammengefügt.

Sprite Ausgabeoptionen

Horizontaler Abstand
Definiert den Abstand zwischen den einzelnen Bilderreihen. Dieser Wert muß groß genug sein um einer fehlerhaften Darstellung in Safari vorzubeugen. Wir empfehlen den Originalwert beizubehalten.
Vertikaler Abstand
Definiert den Abstand zwischen den einzelnen Bildern. Dieser Wert muß groß genug sein um es Besuchern zu erlauben Ihre Schriftgröße zu verändern ohne ungewollt Teile von anderen Bildern anzuzeigen.
Hintergrundfarbe
Definiert die Hintergrundfarbe des Ausgabebildes. Das Feld erwartet einen sechs Zeichen langen hexadezimalen Farbwert. Falls keine Farbe angegeben wird erstellt das Werkzeug transparente PNG oder GIF Bilder.
Sprite Ausgabeformat
Unterstützte Formate sind GIF, PNG und JPG. GIF und PNG können transparente Hintergründe haben. Voreinstellung ist PNG.

CSS Ausgabeoptionen

CSS Präfix
Jede CSS Positionsangabe wird an diesen Text angehängt was Ihnen erlaubt weitere ID und CSS Klassen zu definieren. Erlaubte Zeiceh sind a-z, 0-9, _, -, # und .
Regulärer Ausdruck zur Fileauswahl
Erlaubt sind reguläre Ausdrücke.
Die Teile des Ausdruckes in runden Klammern werden Teil des Klassennamens für die Positionierung.
CSS Präfix
Der eingegebene Text wird vor jedem erstellten Klassennamen eingefügt. Dies ist wichtig, da Klassennamen nicht mit einer Nummer beginnen dürfen. Erlaubte Zeichen sind - a-z, 0-9, _ und -. Der eingegebene Text darf nicht mit einer Nummer beginnen.
CSS Suffix
Der eingebene Text wird am Ende von jeder CSS Regel eingefügt. Die Regeln sind die gleichen wie bei "CSS Präfix".