201216Feb

Stitches: Sprites für CSS mit HTML5 generieren

Um Sprites für den Einsatz in CSS vorzubereiten, bieten sich verschiedene Tools wie der Spritebaker oder Sprite Cow an. Allerdings fehlt in dieser Sammlung noch ein Werkzeug, mit dem sich aus einer Menge an einzelnen Grafiken ein großes Spritesheet sowie der dazugehörige CSS-Code erzeugen lässt. Dieses Bindeglied könnte Stitches sein, ein interaktiver Spritesheet-Generator, der auf HTML5 und jQuery basiert.

Stitches - An HTML5 sprite sheet generator

Die Funktionsweise ist denkbar einfach: Existierende Grafiken müssen einfach in das Browserfenster gezogen werden und anschließend kann daraus per Klick ein Spritesheet erzeugt werden. Hierbei kommt Canvas und die Base64-Enkodierung zum Einsatz. Das Spritesheet kann dann separat als Grafik abgespeichert oder wahlweise auch direkt als Data-URI eingebunden werden. Der Sprite-Generator funktioniert in aktuellen Versionen von WebKit und Gecko. Für Internet Explorer wurden verschiedene Shims (Dropfile, Flashcanvas) integriert, um die Funktionsweise zu gewährleisten — allerdings werden hierfür Flash und Silverlight vorausgesetzt. Mehr Details finden sich wieder bei GitHub.

RSS-Feed abonnieren