CSS Sprites

What is it? What am I doing here ?

Every web developer or designer who had to deal with CSS sprites will understand that it might be kind of harsh to determinates CSS coordinates on sprite sheets, even using developers tools like Firebug.

So, here's the app that solves it all up!

CSS Sprites representation

CSS-Sprit.es is an online tool to help web designers and web developers to build CSS Sprites.
If you don't know what is a CSS sprites and are a web designer/developer please, do Internet a favor and consult this great article on A List Apart on the subject.

Here is a 2 minutes screencast showing the CSS Sprite recovery tool.

More screencasts to come. Stay tuned!

If you have feedback please, use our feedback forum.

Compatibility

Note that the generated CSS and images are compatible with most browsers

Mozilla
Chrome
Safari
Opera
MSIE 6+

Many mainstream sites like Amazon, Yahoo and Google are using this very same technique.

CSS Sprite Generator

Flash Multi Upload

Standard Upload

Custom Sprite

Input Images Files

Please, choose and upload the image files you want to use in your css sprite and click "Create CSS Sprite".
The application will join all your images files into a single file and will generate the corresponding CSS and HTML code along with the rollover effect if any choosen.

Allowed image types : png, gif, jpeg
Each file should not be greater than 5kb in size.

Flash Multiple Files Upload

Please, choose and upload the image files you want to use in your css sprite and click "Create CSS Sprite".
The application will join all your images files into a single file and will generate the corresponding CSS and HTML code along with the rollover effect if any choosen.

Allowed image types : png, gif, jpeg
Each file should not be greater than 5kb in size.

Custom Sprite Upload

The custom sprite upload feature will help you to find what are the css coordinates for a pre-made image sprite. Simply upload from a file or an URL and select revelant areas, choose a CSS class name or let the tool generate one for you then finish by clicking "Snap!" button to save the corresponding CSS in the CSS code box below.

From File
From URL

Magnification Level
▲ ▼

CSS Coordinates

Left px
Top px
Width px
Height px

Class Name without the dot

Output Options

Output Image type, depending on the format choosen, transparency might not look like expected. Be wise in you choice.

Image File Type:

Stylesheets lang:

CSS Compression:

Hover Image Processing

The choosen effect will be applied to your original image to generate the custom CSS rollover

Rollover Effect:

Image Output

Preview

Image Sprite (Left click + Save Image As ...)

Code Output

CSS Code

HTML Code

They talk about us

SmashingMagazine (via twitter)
Dion Almaer from Ajaxian (via twitter)
MakeUseOf (review)

About CSS-Sprit.es

This service is carrefully handcoded by me, Nicolas Crovatti, using various techniques and open source libraries.
CSS Sprites Generator makes use of jQuery with various plugins, Pixastic and a little PHP.
The main goal was to achieve a convenient tool to build, recover and overall deal with the CSS Sprite technique, all using almost only javascript. Because of Javascript's lack (for evident security reasons) of filesystem support, I have used PHP to store your files on my server, thus making them usable in a more convenient way for Javascript.

For any concern you can always reach me at nico at shinylittlething.com.

Disclaimer

This service is built using advanced technologies that are still under draft status. HTML 5 Canvas element must be supported by your browser in order to use the CSS Sprites Hover Generator.
Hopefully, you can install one of those.

Supported browsers :

On the compatibility concerns, I will not try to support Internet Explorer until it support natively the technologies used at CSS-Sprit.es (For the record, Data scheme URIs and Canvas tag). In other terms, this may take a while.

On the other hand there's glitches with the Opera browser, it won't react very well when base64 data encoded from your files is greater than 4k bytes.

So if you are person that need to use CSS-Sprit.es and that do not have the choice of your browser, then you're out of luck. You still can try other CSS Sprite generator around the web

Please, contact me at nico {at} shinylittlething (dot) com if you successfully tested css-sprit.es on a different engine.