Guymon

Sprite Generator für den Mac

SpriteRight schaut wie ein fantastisches Tools aus.

SpriteRight is a CSS spritesheet generator for the Mac that lets you import your existing images or stylesheets.

Leider nur für OS X 10.7 und nur über den AppStore. Der zweite Punkt nervt mich ein wenig. Warum kann man Software denn nicht “normal” kaufen, also ohne Apple ID, grrr.

Diagonal Sprites

Aaron Barker schlägt diagonale Sprites vor um dem Problem zuvorzukommen, das sich das Bild wiederholt wenn das Element in dem es genutzt werden soll größer ist als erwartet:

With the sprite built on a diagonal there are no components below or to the right of the component you are showing. This allows for the element using the sprite to be as wide or as tall as it needs to be with no worry of exposing the next component.

Unfortunately there is a filesize tradeoff. You add a LOT of unused whitespace. For one 30 or so component sprite that I changed from vertically stacked to diagonally stacked, there was only about a 10% increase in size. For another that had around 60 images, it was a 45% increase.

Chris Coyier löst das selbe Problem mit pseudo Elementen:

Use a CSS pseudo element (:before) to add an element with a known width and height in which to apply the image

Pseudo Elemente sind sicherlich eleganter, aber leider noch nicht in jedem Browser unterstützt.

Sprite Cow

Sprite Cow ist ein interessanter Helfer beim Arbeiten mit CSS Sprites.

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

Den Code gibt es auf GitHub.

Spritemapper

Ich habe gerade eine weiteren Spritegenerator entdeckt den ich mal testen werde - Spritemapper.

Spritemapper ist ein Python Programm und lässt sich auf dem Mac mit dem Befehl sudo easy_install spritemapper installieren.

Die Webseite wird dann ohne Sprites entwickelt und vor dem Deployment wird das Skript spritemapper /path/to/myfile.css aufgerufen was alle die Arbeit macht. Klingt gut, werde ich testen.

Spritebox

Und noch ein Sprite Tool zum Testen: Spritebox:

Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally free to use.