search cancel – Create CSS Classes From Sprites

Spritebox.netA new tool that is squarely aimed at web designers, Spritebox lets them create CSS classes from a single sprite image. This is achieved by aligning the different areas of the sprite image to be used into the block elements of the webpage in question. Technically, such a thing is made possible by combining JQuery, CSS 3 and HTML 5, and Spritebox is compatible with Firefox, Chrome, Safari and Opera.


The site has a resizable editor that lets you either upload the image that you want to have used or supply the URL where such an image can be found, and then adjust it manually by changing its width, height and position. A preview window will let you see the effect of all these changes in real time.

Spritebox can be used for free, and there is no need for you to sign up in advance either. The site is usable on the fly – as long as you have any of the browsers mentioned above, then you will be able to start turning your images around. In Their Own Words

Create CSS from Sprite Images.

Why It Might Be A Killer

It is a free tool that can let designers save a considerable amount of time when it comes to processing images and having them turned into CSS classes and IDs.

Some Questions About

What about other browsers? Will they ever supported Spritebox to the same degree than the ones who can run it now?


Author : Roger Hollings

Born and bred in Maine, Roger is one of the longest-standing writers for A translator by trade, he is passionate about art in all its forms. He enjoys both classic and contemporary literature, nature photography and music from both sides of the Atlantic. Fascinated by technology from an early age, he has always explored the ways in which computers let people articulate their thoughts and communicate better with the world at large.

Share This Post On