40+ CSS Sprite Generator and CSS Image Sprites Tutorials

Posted on 11. Nov, 2009 by lava360 in Freebies, Gadgets, Tutorials

Tweet

Share

Delicious

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

Tags: coding, CSS, Layouts, templates, XHTML