10 Great Tutorials About How to Create and Use CSS Sprites

10 Great Tutorials About How to Create and Use CSS Sprites

admin

09/10/2019 0 Comment

If you don’t know what a CSS sprite is or how to use it, you really need to read this. Basically, using a sprite is a different way of displaying images on your site.

Instead of embedding lots of images in your web page, you put all the images into ONE image ‘sheet’ (imagine a GIF or JPG with a bunch of images all pasted onto it), or sprite, then you use CSS to show just the portion of the sprite sheet you want to show for each image instance on your site.   You use the CSS background-position property to specify the X and Y coordinates for the rectangle within the sprite that you want to show.

Let’s say you want to use all these images on your site.

Instead of slicing them in Photoshop individually, you put ‘em all on one ’sprite sheet’ and then you reference a piece at a time, using the CSS background position
property.

With the CSS background positioning property you pass the X and Y coordinates of the rectangular
area you want to show.

Here are 10 great tutorials on how to set up and use CSS Sprites:

1. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

2. A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death

3. CSS Image Sprites

4. 10 Must See CSS Sprites Tutorials

5. Creating & Using CSS Sprites

6. The Mystery Of CSS Sprites – Coding – Smashing Magazine

7. How to Make a CSS Sprite Powered Menu

8. CSS Menus With Images – CSS Sprites

9. Coding Apple’s Navigation Bar Using CSS Sprites

10. 21 Must See CSS Sprites Tutorials