Hollen-B Web and Graphic Design Portfolio

A Cool CSS Technique I Found being Used by Digg.com

How to display a single icon from a gif image with multiple icons. This CSS technique can be found being used by the designers of Digg.com.

What I found on Digg

While working on one of my projects I wanted to add a star icon to symbolize add to favorites. Digg has a very similar option so I thought why not see how they handle this task. While digging through their source I decided to take a look at their icon image and come to find a long row of icons. Holy crow, what a fantastic idea! I have used similar techniques for rollover buttons but never a full on tool-set.

Link to Digg's icon tool set: http://cotnet.diggstatic.com/img/tools.gif

So why have a long strip of icons?

Well being that there is a total of 9 icons in the digg tool set and each icon is used all over the web site. Also depending on the user criteria some icons may need to be displayed in a different color to show the user has already clicked the icon. I'm sure we all can agree when you load an image once, the second time you load it will be even faster. So with that in mind, loading one image instead of multiple images sounds like a good idea to me. A few more good reasons to keep all your icons on one image would be less files to gather when reusing for other projects, less clutter in your image folders, cut time on tracking down icons, and why not keep all our tools in one object.

How the Digg tool strip of icons is used

 
.comments { 
 background: url(/img/tools.gif) no-repeat 0 -196px; 
}
.comments, .share, .bury-link, .fave, .faved { 
 padding: 4px 6px 4px 18px; 
 text-decoration: none; 
}

What this does is takes their /img/tools.gif background image and moves it up 196 pixels which displays the comments icon in their tool set. The second set of classes use padding to position the text so it doesn't cover the background image. They also use padding to align text with the background image for proper placement. These classes style their href elements as seen below.

<a href="#" class="tool comments">Comments</a>

Simple example coded by Brandon Hollenbeck

I coded this example below for the use of other people to play around with. Please feel free to use this tool set image created by me, just please no hot-linking.   tool_kit.gif

CSS

#tool_bar { 
 float:left;
 margin:0; 
 padding:0; 
 border:1px #CCCCCC solid;
}
 
#tool_bar li { 
 float:left; 
 list-style: none; 
 border-right:1px #CCCCCC solid;
}
 
#tool_bar .no_bdr { border:none; }
 
.save, .saved, .delete, .comment, .hover_save { 
 padding: 4px 6px 4px 20px;
 font-size: 16px; 
 text-decoration: none;
}
.save { background: url(images/tool_kit.gif) no-repeat 2px 5px;}
.saved { background: url(images/tool_kit.gif) no-repeat 2px -35px;}
.delete { background: url(images/tool_kit.gif) no-repeat 2px -75px;}
.comment { background: url(images/tool_kit.gif) no-repeat 2px -115px;}
.hover_save { background: url(images/tool_kit.gif) no-repeat 2px 5px;}
a:hover.hover_save { background: url(images/tool_kit.gif) no-repeat 2px -35px;}
}

HTML

<ul id="tool_bar">
 <li><a href="#" class="save">Save</a></li>
 <li><a href="#" class="saved">Saved</a></li>
 <li><a href="#" class="delete">Delete</a></li>
 <li><a href="#" class="comment">Comment</a></li>
 <li class="no_bdr"><a href="#" class="hover_save">Save/Saved Rollover</a></li>
</ul>

Example

Comments