internerz

Ich bin gerade auf das kleine, aber feine Online-Tool “SpritePad” gestoßen, mit dem man CSS-Sprites einfach im Browser erstellen kann.

Der Vorteil von CSS-Sprites liegt auf der Hand: Man spart sich Server-Requests, indem man für jedes Icon und deren Over-Status nur eine Grafik hat, die geladen werden muss. Ein weiterer Vorteil dabei ist, dass die Over-Zustände nicht erst beim Hovern über das Icon geladen werden, es käme sonst zu einem weiteren Server-Request, der Browser lädt die Datei und zeigt solange keine Grafik an und es flackert unschön.

Bisher bastelte ich mir meine Sprites mit Photoshop zusammen, bei gleicher Icon-Größe bspw. konnte ich alle 40px ein Icon setzen, so dass das Erstellen der CSS-Definitionen nicht alzu aufwändig ist. Alternativ schmiss ich Firebug an und verschob die Hintergrundgrafik so lange, bis es passte.

Mit SpritePad kann man jedes Icon in den Browser an die richtige Stelle auf der Arbeitsfläche ziehen und es am Ende abspeichern. Die dazugehörigen CSS-Klassen werden gleich miterstellt. Da sie als Klassennamen den Dateinamen (ohne Endung) erhalten, empfiehlt es sich, so oder so, seine Icons gleich sprechend und eindeutig zu benennen. Ganz ohne CSS-Anpassungen kommt man aber wohl nicht aus, denn man hat für die Over-Zustände ja meist keine eigene Klasse, sondern den CSS-Selektor :hover.

Es gibt übrigens auch noch eine Premium-Mitgliedschaft, die für 5€/Monat die Funktion des automatischen Ausrichtens freischaltet (einzelne Grafiken werden per Klick ausgerichtet, Verschieben per Drag & Drop kann man sich  sparen), man kann unbegrenzt viele CSS-Sprites in der SpritPad-Cloud speichern und Sprites mit anderen teilen und bearbeiten. Für mich persönlich nichts, aber vielleicht für Menschen, die viele, sich öfters ändernde Spritemaps erstellen. Speichern geht übrigens auch ohne Premium-Account, jedoch kann man nur 2 Sprites speichern.

15. März 2012 von Benjamin Strilziw
Kategorien: Web | Schreibe einen Kommentar