Create a simple menu with CSS Sprite

CSS Sprite. Just the concept of CSS sprite seem to befuddle new web designer. Rest assured that CSS sprites is a very simple concept and a pretty useful one too. In this tutorial I will walk through creating a simple menu powered by CSS Sprite

CSS Sprites

CSS Sprite is a concept where instead of having multiple images for your webpage, you can have a single sprite which will have all your images in it. Typically, a sprite is a transparent image in .png format. For our menu, we need those four icons into a single sprite which we will manipulate using css.
Here is the sprite I came up with in photoshop:

I got these delicious icons from here. My icons are 64×64, so I set the canvas to 64×256 since I need to stack the four icons on top of each other. I set up three guidelines, each spaced exactly 64px apart. Now I just imported the icons and placed them inside those guides. Export this sprite to a .png file with a transparent background.

The markup

Since now we have the sprite ready, lets start with the markup

  <ul class="menu">
    <li id="cakes">cakes</li>
    <li id="donuts">donuts</li>  
    <li id="rolls">rolls</li>  
    <li id="pies">pies</li>    
  </ul>

The reason I have added IDs to each list element is because we need an identifier to distinguish between east list item for our css.

The CSS

Here is the necessary CSS we need for the sprite to work

ul.menu li    {
   color:#47170b;
   font-size:40px;
   padding:12px 0 12px 85px;
   margin:14px 0;
   background:url(sprite.png) no-repeat
}

Note that we add the sprite as a common background for all the list elements, along with the necessary padding and margin.

   ul.menu li#cakes   {background-position:0 0}
   ul.menu li#donuts  {background-position:0 -64px}
   ul.menu li#rolls   {background-position:0 -128px}
   ul.menu li#pies    {background-position:0 -196px}

Adding these css will distinguish the list from one another. Note that the Y-position of the background is shifted up in multiples of 64px, since our icons are spaced out that way.

Conclusion

There you go, after necessary styles, you should have your CSS Sprite-powered menu. Feel free to download my files and experiment. Have fun!