A few days back, I wanted to use a Twitter icon from one of my other websites but I was not able to save it from the web page. Then I looked into the page source and found that it’s using CSS Sprites to display all the social bookmarking images from a single large image. So my WordPress theme is using CSS Sprites for faster page loading and I was totally unaware of that. Then I decided to learn it and how to use it in a webpage.
I was amazed to find out that there are so many online tools to create a CSS Sprite image and provides CSS Code to use them. Some of them even went a further step to provide a sample HTML page to make the learning more comfortable.
Here I am providing 6 online CSS Sprite Generator tools and all of them have something unique to be in the list.
Table of Contents
1. CSS Sprite Generator:
This is one of the best online tool for CSS Sprite images and getting their CSS Code and HTML code. The best part is that you can create your account here and then login after sometime to get your older project data. You can add up more images in the project and again generate the code. A very useful tool for designers who create themes and use CSS Sprite techniques a lot.
This is one of the most widely used tool having a lot of options. They provide option to create the image in either and vertical format, ignore duplicate images, image size options. The two things I really liked a lot about this tool are:
- Support for various languages
- Upload files in zip format, very handy if you have 50+ files to use.
3. CSS Sprit:
If you want to have rollover effect with your CSS Sprite image, this is the tool to use. The only demerit with the tool is that the each file size should be less than 5kb. They provide CSS and HTML code to use and you can even load images from the URL in Custom Sprites mode.
4. Sprite Box:
Reverse tool to generate CSS code to display selected image from a single image. The visual WYSIWYG editor and JQuery based interface is easy and awesome to use. A great tool to use if you just want some part of the image to display using CSS Sprites.
5. Sprite Gen:
6. CSS Sprites:
If none of the above tool is working, then you can go for it. A simple tool providing basic CSS rules, CSS Sprite image and sample HTML page to use it.
If you have many images to use, avoid this tool.
I hope you liked the post, don’t forget to share it with others.