Ali Jafarian
Ali Jafarian

CSS sprites have been around for a while, and for good reason. They minimize server requests (which allows web pages to load faster), and they keep CSS organized. They are, however, a bit tricky to understand at first.

For those of you who aren’t familiar with CSS sprites, the basic concept behind them is to create one image file made up of multiple images for your web page’s background images (instead of separate background images). But that sounds crazy! Yes, at first it does. But once you realize the benefits of CSS sprites you will try to user them for everything possible! In fact, most large enterprise level websites do use one image sprite for most of the graphics on their site.

Today I’m going to show you how to design your image sprites and CSS to be more flexible in your website or application.

Design

We’re going to design a 80×20 pixel sprite that contains four 20×20 pixel icons. The point here is to avoid any un-needed space and make our sprite as compact and pixel perfect as possible. I’ve referenced some examples below:

Good Sprite

Bad Sprite

The HTML

Our HTML will consist of a parent <div> that contains a standard <ul>. Inside of the <li>’s we have anchor links with their own unique class (or id, if you prefer). Then, inside the <a>’s we place a <span> with a consistent class (in this example I used “icon”).

<div id="icon-nav">
  <ul>
    <li><a href="#" class="profile"><span class="icon"></span>Profile</a></li>
    <li><a href="#" class="inbox"><span class="icon"></span>Inbox</a></li>
    <li><a href="#" class="calendar"><span class="icon"></span>Calendar</a></li>
    <li><a href="#" class="settings"><span class="icon"></span>Settings</a></li>
  </ul>
</div>

The CSS

Our CSS is pretty standard, but the key to realize is the positioning of the <span>’s. They are positioned absolutely inside of the relative positioned <li>’s. This allows the icon to be part of the clickable <a> without being a background image. It also give us complete control over where the icon is positioned in relation to your link. So if the styling of your links changes you don’t have to re-size the sprite image, you simply change the CSS background-position property to reflect the new positioning.

#icon-nav {
  float: left;
  width: 600px;
}
#icon-nav ul {
  font-family: 'Play', sans-serif;
  font-size: .9em;
  list-style: none;
}
#icon-nav ul li {
  border-left: 1px solid #ea7f15;
  float: left;
  position: relative;
}
#icon-nav ul li a {
  background: #ea7f15;
  background: -moz-linear-gradient(top, #ea7f15 0%, #db4602 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea7f15), color-stop(100%,#db4602));
  background: -webkit-linear-gradient(top, #ea7f15 0%,#db4602 100%);
  background: -o-linear-gradient(top, #ea7f15 0%,#db4602 100%);
  background: -ms-linear-gradient(top, #ea7f15 0%,#db4602 100%);
  background: linear-gradient(top, #ea7f15 0%,#db4602 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea7f15', endColorstr='#db4602',GradientType=0 );
  color: #fff;
  display: block;
  padding: 20px;
  text-decoration: none;
  width: 109px
}
#icon-nav ul li a:hover {
  background: #ea7f15;
}
#icon-nav ul li a span.icon {
  background: url(images/icons_sprite.png) no-repeat;
  height: 20px;
  position: absolute;
  right: 20px;
  top: 18px;
  width: 20px;
}
#icon-nav ul li a.profile span.icon {
  background-position: 0 0;
}
#icon-nav ul li a.inbox span.icon {
  background-position: -20px 0;
}
#icon-nav ul li a.calendar span.icon {
  background-position: -40px 0;
}
#icon-nav ul li a.settings span.icon {
  background-position: -60px 0;
}

Summary

And there you have it! A simple, yet flexible, CSS icon sprite. Keep in mind that there are many ways to design and code CSS sprites. Many designers/developers will use the sprite as a background image for the <a> links themselves, as opposed to creating extra spans. That’s a fine approach, but over the years I’ve found this approach to be more efficient in terms of time and ability to update. Hope it helps!


Ali Jafarian

Ali is a father, husband and serial entrepreneur with a deep drive to create. He writes, records, codes and builds things to inspire the artist in all of us.


Did you find value here?

If so, jump on my email list to be notified of new posts.

Subscribe

Discussion

Leave a Comment

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


Latest Articles
Truly Seeing Our Children

How often do we truly see our children? Let me be clear – most of us see our children every day, especially if they’re still living in our homes. We…

View Post
A BraveSoul Experience

I had the recent privilege to experience the BraveSoul 2022 retreat in Ireland. This event was both world class and transformational. It’s the type of retreat you need to experience…

View Post
The Cost of Attachment

What’s the cost of attachment? This is a question came into direct focus for me with the recent passing of my dog, Raja. The experience of Raja passing was quite…

View Post