201122Jun

Sprite Cow: Code für CSS-Sprites per Klick erzeugen

Bei der Optimierung einer Website lassen sich mit CSS-Sprites unnötige Abfragen einsparen: Die Zugriffszeit für die benötigten Ressourcen kann so reduziert werden und bei größeren Projekten können hier deutliche Verbesserungen eintreten. Besonders beliebt dürften Sprites bei der Erstellung einer Navigation sein, da sich die verschiedenen Zustände der Menüpunkte sehr gut in einer gemeinsamen Grafik unterbringen lassen.
Doch die Arbeit mit CSS-Sprites bringt nicht nur Vorteile: Mühsam kann die Erstellung des dazugehörigen CSS-Codes sein, in dem die genauen Koordinaten und Größenangaben der Teilgrafiken enthalten sein müssen. Die Agentur "The Team" hat das erkannt und ein wirklich nützliches Werkzeug ins Leben gerufen: Mit Sprite Cow lässt sich der entsprechende CSS-Code einfach per Klick generieren. Die Flächen für die Teilgrafiken werden dabei automatisch erkannt und ausgewählt.

Sprite Cow - Generate CSS for sprite sheets

Die Anwendung bietet die Möglichkeit, eine bestehende Spritemap auszuwählen oder mit der Demo-Spritemap zu arbeiten. Sobald die richtige Hintergrundfarbe festgelegt wurde (oder eben auch ein transparenter Hintergrund), können die CSS-Snippets per WYSIWYG-Ansicht erzeugt werden. Sprite Cow funktioniert sehr gut und stellt eine interessante Methode dar, um schnell den CSS-Code einer komplexen Spritemap zu erstellen. Ein Manko wäre die fehlende Möglichkeit, individuelle Bereiche zu erstellen. Doch Zeit sparen lässt sich mit dem Werkzeug in jedem Fall.