Do you really understand CSS Sprite? The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position?
Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one. The origin of the term “sprites” comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. The sprite was the big combined graphic. CSS Sprites is pretty much the exact same theory: get the image once, shift it around and only display parts of it, saves the overhead of having to fetch multiple images.
CSS Sprite Generator
1. CSS Sprites Generator v.0.0.2-alfa
This tool allows you to upload multiple files and generate a sprite out of them. It also gives you the CSS code (the background-position value) for each image in the sprite.
2. CSS-Sprit.es
3. Data URI Sprites
DURIS (Data URI [CSS] Sprites) is a new method to manage website’s background images. It’s aimed to replace classical CSS Sprites.
4. Spritr
This simple tool lets you upload multiple images and generates CSS code for the sprite.
5. Sprite Creator 1.0
This tool allows you to upload an image and create the CSS code for selected areas of the sprite.
6. CSS Sprite Generator
A Drupal module for building CSS sprites.
7. Projekt Fondue CSS Sprite Generator
This generator lets you ignore duplicate images, resize source images, define horizontal and vertical offset, define background and transparency color, assign CSS class prefixes and various other things. It also supports many languages. The source code is available for downloading and is covered by a BSD license. Want to run a local copy? Well, you can do that, too.
8. SmartSprites
A Java-based desktop application that parses special directives that you can insert into your original CSS to mark individual images to be turned into sprites. It then builds sprite images from the collected images and automatically inserts the required CSS properties into your style sheet, so that the sprites are used instead of the individual images.
CSS Sprites Tutorials
1. David Walsh Blog
2. e-House Studio: CSS Sprite Navigation Tutorial
3. Web Site Tips: CSS Sprites Tips
4. Peachpit: What are CSS Sprites
5. WebSite Optimization: CSS Sprites
6. A List Apart: CSS Sprites
7. Tutorial9: Building Faster Websites with CSS Sprites
8. Net Tuts: Video Tutorial on Exactly How to Use CSS Sprites
9. Victoria Web School: Video css-sprites-tutorial
10. Webolia: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
11. Kick Developer: CSS Sprite Tutorial
12. Blogging CSS: CSS Menus With Images – CSS Sprites
13. Line25: How to Create a CSS Menu Using Image Sprites
14. Coding Apple’s Navigation Bar Using CSS Sprites
15. Video How to Use CSS Sprites
designfollow
thanks for this great post
eMoney Blog
Hi!
I work with wordpress and I’m new to this css sprite thing.
I looked through all the tutorials and explanations but I could not find one that explained to me how to insert css sprites into the actual content in wordpress: I mean inside the article, where there is no possibility to link to a css stylesheet, so I figured it out myself.
For those looking trying to do the same thing as me, here is how I did it:
First I created a transparent 1px gif image and saved it on my server.
Then, in my article I inserted the image I wanted to show in the usual way. Then I changed the html code as follows:
Instead of using the actual image link as the source (src) I used my my 1px empty .gif, and then I added a style to my image where I put the property “background:url ()” with the image link. And it is with this background:url that I could use the css sprites.
In code it looks something like this:
As you can see here, you have the height, the width and the background position for the background:url: the css sprite.
The empty gif image is used as the source so that when the page loads it does not display the empty image sign “x” in IE when it cannot find any.
I hope this was useful to someone. This is the way I did it, maybe someone else has a different/better approach.
Cheers
webchester
very nice work.