LOGO
2x

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:

browser browser browser browser

Last Update 02/01/11

Added preview panel for boxes, sprite image uploading, variable zoom with Shift & Z, and other tweaks suggested.

Keyboard controls:

zoom Toggle Zoom   zoom Zoom Amount  
crosshairs Toggle Crosshairs 
shift Move  shift 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!

Feedback

Please use this contact form to send any bugs, criticism or feature requests.






Alternatively, email gilbert.sinnott@gmail.com

?
ico
Enter an URL or
.
#
Width:
Height:
Pos X:
Pos Y:
Mass:
none
block
inline-block
Repeat:
none
x
y
xy
Create CSS
Think that was cool?
Preview: None selected

Gilbert Sinnott 2011