Introduction

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!

Spritebox works best in:

Keyboard controls:

Toggle Zoom   Zoom Amount  
Toggle Crosshairs 
Move  Resize 

Quick start:

1. To begin, you can either enter an URL of a hosted sprite image or click upload an image. You can also drag and drop to upload images into Spritebox.
2. Click and drag to create a block element on the desired portion of the sprite. Blocks are draggable and can be resized using the handles. Alternatively, use the arrow keys to nudge the block, or hold down Shift and use the arrow keys to resize.
3. For extra accuracy, toggle the Z key to activate zooming and use Shift & Z to change the zoom amount. You can also toggle X to add crosshairs.
4. Use the floating toolbox to rename your blocks as Classes or IDs, and change additional CSS properties.
5. Rinse, repeat, then click Create CSS.

Example sprites:

Facebook | Apple Nav | Youtube | Google | Pokemon!