CSS Sprites

What a wonderful idea, simple and easy. A great way to reduce HTTP GET's.

How to use it in your application:

1. Find/Buy a good icon set (like tango), try to find a transparent one.


2. Place a div where the icon would be located and set its onclick event to whatever you want it to do.


3. create a css class for the icon:



  .icon-name { 
    display: block; height: 32px; width: 32px;
    background: transparent url(icon.png) -(x)px -(y)px no-repeat;
    cursor: pointer;
  }



4. Change height, width and (x) and (y) position with the respective values.


5. assign the class to your div.

Pretty easy.