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-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
Compatibility
Note that the generated CSS and images are compatible with most browsers
- Mozilla
- Chrome
- Safari
- Opera
- MSIE 6+
Many mainstream sites like , and are using this very same technique.
CSS Sprite Generator
Image Output
Preview
Image Sprite (Left click + Save Image As ...)
Code Output
CSS Code
HTML Code
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 .
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 around the web
Please, contact me at com if you successfully tested css-sprit.es on a different engine.
