CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. Today we have list 8 best css sprite resources.
Nav-o-Matic
Simply upload your navigation sprite below, add some guides, name some stuff and hey presto! Nav-o-Matic will generate all the code you’ll need to get your navigation working in a jiffy!
Css Sprites
Upload your image, add more than one image and create your sprite, You could also set your output type as PNG, JPEG or GIF.
CSS Sprites
Upload any number of images and just hit the Generate button to create your CSS sprite.
Spritebox
CSS Sprite Generator
Just upload your source file, and create the sprite image and CSS by ignoring the duplicates, resizing the source images, setting the sprite and CSS options like horizontal and vertical offset, background color, class prefix, CSS suffix etc.
CSS Sprite Generator
Choose your set of images to be combined into a CSS sprite, customize the background colors and order the images in your way and get the final job done.
Canvas CSS Sprites
This tool can help you make CSS Sprites with <canvas> support in browsers. As a web designer/developer, your browser should support canvas.
This tool can help you make CSS Sprites with <canvas> support in browsers. As a web designer/developer, your browser should support canvas.
CSS Sprites
Just upload the files you want to use in your CSS sprite and click the button to join all your images into a single file and generate the corresponding CSS and HTML code. You could even achieve any rollover effects.
If you are using ASP.NET you should also check out the ASP.Net Sprite and Image Optimization Framework on CodePlex.
There is more info and a link on my blog at http://blog.stevelydford.com/2010/08/asp-net-sprite-and-image-optimization-framework/
I wish to show you my contribution with my css/sprite generator at
http://lab.hemca.com/css_sprite
It integrates a multi file upload, css generation and a fast preview.
Thanks for testing !
strzel_a…
just wanted to say thanks very much…your sprite app is fantastic!
Cheers!
Tyson
This is a great collection of resources. Thank you for sharing.
Here is another option to add to this page.
There is a package on the code project for ASP.NET sites that generates sprites for you on the fly, does all the caching (including auto refresh of the cache when there are new or updated images), etc. It also lets you resize images on the fly (great for thumbnails), compress them, and other good things.
Unlike Microsoft’s attempt at sprites, with this package you don’t have to change your site. You simply add a .dll to your site and configure the package in your web.config with a few lines.
It is at:
http://www.codeproject.com/KB/aspnet/cssspritegenerator.aspx
Here is one that really simplifies your workflow when managing sprites:
http://www.spritemeister.com
Really great collection of resources! Thanks
http://cssspritesgenerator.com/ Service no longer active
If you are on Mac, you can use Sprite Master Web to generate your CSS files efficiently. It generate your smallest sprite sheet using advanced algorithms and writes your CSS file automatically and easily.
You can take a look at http://www.mobinodo.com/spritemasterweb for more information. Also a YouTube video is here: http://www.youtube.com/watch?v=458Qx7JW5PI