CSS Sprites

Beginner CSS tutorial: This is a CSS technique using sprites (one large image containing little images) is great for hover effects and image transitions and deals.

A common issue:

a.hover {background: url('link_hover.gif');}

The problem with this CSS is that link_hover.gif will only start to load after the visitor has hovered over the hyperlink (a separate HTTP-Request. The more of these, the less efficient your page is). This means the visitor isn’t going to see your pretty hover effects unless they move the cursor over the second hyperlink (a visitor isn’t going to wait for the image to load when they’re not aware there is an image in the first place). Using CSS sprites will have all images and hover effects as one whole HTTP-Request to load that one large image meaning no delays to image transitions and hover effects appearing instantly.

Example: I have used this technique on one of my website designs and will be showing you how to use this technique yourself.

  1. Firstly, you need to make your sprite image containing all the images you need. I tend to place the images horizontally with the hover version underneath, this can be done vertically as well. Here is my sprite below, the icons are yellow and then turn blue when the visitor hovers their cursor over them. I prefer to place each image right next to each to make it easier with background positioning numbers later on but you can space them out if you like.SpriteEDIT (09/2014): I have learnt that it is advised to have each sprite in your image more spread out compared to the image above (at least a few pixels gap between each sprite).
  2. In HTML, make sure you have added a class (with different names for each image) to each element that will be using the sprite image.
    <ul class="nav">
     <li><a href="about.html" class="about"></li>
     <li><a href="avatars.html" class="avatars"></li>
     <li><a href="designs.html" class="designs"></li>
     <li><a href="renders.html" class="renders"></li>
    <!-- ...and so on -->
     </ul>
  3. Before I start using the sprite, I will make my navigation into a horizontal list. You might want to add some padding or margin spacing between each item in your navigation as well. I have added 15px of margin spacing on the left and right side of each link in this example code below.
    ul.nav li {
     display: inline;
     float: left;
     list-style: none;
     margin: 0 15px;
     }
  4. Now I will write the CSS that will be applied to all navigation links regardless of the assigned class. This is where you add your sprite as a background to all links and ensure that the links are the same size as your images in the sprite. Each of my icons used are 64 x 64. If the images in your sprite are different sizes then the height and width will go into the classes and not in this step.
    ul.nav li a {
     background: url('nav.png') center top no-repeat;
     display: block;
     width: 64px;
     height: 64px;
     }
  5. Now for each class, you will need to specify the co-ordinates of which part of the sprite you want as the background by using background-position. With background-position, the first value is horizontal and the second value is vertical.The first icon will be easy because it’s in the corner of the sprite:
    ul.nav li a.about {background-position: 0 0;}
  6. For the hover effect, we want to display the 64 x 64 icon underneath. This blue About icon is still located at 0px horizontally but is located vertically by -64px (minus 64px to go downwards, 64px to go upwards).csssprites1
    ul.nav li a.about: hover, ul.nav li a.about: focus {background-position: 0 -64px;}

    Remember: Hyperlinks also have a focus state, you may want to include these too.

  7. So all navigation links will be 0px vertically and all hover effects will be -64px horizontally. As mentioned earlier in the tutorial, this is why I placed my icons directly next to each other so that the numbers would be multiples of 64 for each link. Here’s more examples:
    ul.nav li a.avatars {background-position: -64px 0;}
    ul.nav li a.avatars: hover, ul.nav li a.avatars: focus {background-position: -64px -64px;}
    
    ul.nav li a.designs {background-position: -128px 0;}
    ul.nav li a.designs: hover, ul.nav li a.designs: focus {background-position: -128px -64px;}
    
    ul.nav li a.renders {background-position: -192px 0;}
    ul.nav li a.renders: hover, ul.nav li a.renders: focus {background-position: -192px -64px;}
    
    ul.nav li a.reviews {background-position: -256px 0;}
    ul.nav li a.reviews: hover, ul.nav li a.reviews: focus {background-position: -256px -64px;}

    And now you are using the CSS Sprites technique! Here is another example of a sprite for social network icons.

    Social network sprite

    You can see these sprites being used in my Durarara!! website design. Credit goes to Visual Pharm for the icons used in this tutorial.

Share
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *