As you probably know, sprites are 2D images or animations that are integrated into a larger scene to work as description elements and perform some other functions. Sprites are often utilized to generate classes and ID’s in CSS but making these usually requires more than one sprite image.

Spritebox is an useful tool developed by Gilbert Sinnott that allows you to make CSS classes and ID’s from an unique sprite image, making things much easier for web designers and developers.

The tool utilizes the background-position property to align determined areas of a sprite image into block elements of a web page. The tool was created utilizing the latest properties of HTML5, jQuery and CSS3, ensuring its functionality in a very high level.

To start using Spritebox you have to enter an URL of a certain image that is going to be used as the sprite or upload it directly from your computer using the browser or the drag and drop tool. Then you will see the picture above the grid and you must highlight it by dragging the mouse over the picture.

Definitely a helpful tool that every web designer / developer needs to keep within his bookmarks every time that working with sprites becomes necessary, there are more great features that you will discover as you work with the tool, even so here’s a small list summing some of the features included in Spritebox:

• Use the Z key to activate the zoom mode.
• Press Shift + Z to indicate the zoom amount.
• Hitting the X key displays crosshairs.
• Use the main panel to determine different properties such as Mass and Repeat.

Original link: Spritebox