Tue Jun 15 14:07:26 CEST 2010 - Users Feedback and Enhancements.

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
 

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.

Output Options

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

Hover Image Processing

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

 
 
 

Image Output

Preview

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

 

Code Output

CSS Code

HTML Code

 

They talk about us

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.


 
 
loading
Please wait, this may take a little while if you upload big files.