SMOR.tv : Sam Morris > Tutorials > CSS Tutorials > CSS Sprites Tutorial

CSS Sprites Tutorial

09.12.2009 Bookmark and Share

This tutorial will show you how to use a sprite for a set of icons. Sprites are generally preferred rather than using separate image files since less HTTP requests are made. In addition, from a graphic design standpoint I personally find it much easier to manage a set of icons when they are all placed within one Photoshop file. It makes it much easier to grab a part of an icon and use it for another, or match colors for multiple icons. To complete this tutorial you’ll need to have some basic HTML/CSS knowledge and optionally a copy of Photoshop.

CSS with Sprites

The CSS code for sprites is generally broken into 2 parts. The first part of the CSS code sets the basic styling for all of my icon spans. This is where the background is set to the sprite image, but by default backgrounds will be aligned to the top left. Part 2 of the CSS code sets the background-position of each icon span. The first value (X) of background-position is going to be 0 in this tutorial, since the icons in the sprite are flush with the left edge of CSS_Sprites_Icon_Tutorial.png. Alternatively, if  the sprite file used 2 columns of icons, then I would need to set X to move the backgrounds selection to the right. The second value of background-position is the vertical value (Y), which will change based on which icon we want display. Keep in mind the values will always be negative for the Y value, since the top left is 0. As we get each background section we’ll be moving down (further into negative values).

Files

  1. As mentioned above, the first part of the CSS for the sprite will be setting the general styling for all of the icons. div.icons is going to be used as a container for the icons. By not giving the span an ID or class we’re saying ANY span within div.icons will have the style defined below. If possible, you should always use a container since it enables you to easily define styling for all icons at once. Alternatively if my icons were not going to be placed within a container I would need to define each icon span. EX: span.icon1, span.icon2, span.icon3 {/* styling for all icons here */}. Add the following code to your stylesheet or between your <style> </style> tags. Refer to CSS_Sprites_Icon_Tutorial.html if needed.
    [css]
    /* RESET */
    *{margin:0;padding:0;border:0;}
    /* START ICON CSS */
    /* This is where we set the general styling for all icons. */
    .icons span
    {
    font:11px Arial, Helvetica, sans-serif;
    line-height: 16px;
    color: #666;
    background: url(Icon_Sprite.png) no-repeat;
    width: 100px;
    height: 16px;
    margin: 2px 0 4px 5px;
    padding: 0 0 0 22px;
    display: block;
    /*
    float: left;
    If you set float to left the icons will display horizontally instead of vertically.
    */
    }
    [/css]
  2. Now we’ll setup the HTML code needed to display the icons. Add the following code to the body of your HTML document.
    [html]
    <!– START ICONS –>
    <div class="icons">
    <span class="one">Icon One</span>
    <span class="two">Icon Two</span>
    <span class="three">Icon Three</span>
    <span class="four">Icon Four</span>
    <span class="five">Icon Five</span>
    </div>
    <!– END ICONS –>
    [/html]
  3. At this point you should have the CSS code from step 1 added to your document (unless you’re using an external stylesheet), and the HTML code from step 1 in the <body>. Next make sure that the CSS_Sprites_Icon_Tutorial.png is saved in the same place as your HTML file. Then have a look at the results and you should see 5 icons with text to the right of each icon. If not, refer to CSS_Sprites_Icon_Tutorial.html and compare it with your own code.
  4. Everything is setup at this point and the last step is going to be defining the background-position for each of the spans that will be using the icon sprite. The background image will be inherited from div.icons span, so we don’t need to define the background a second time. Add the following CSS code to your HTML document under where we placed the CSS code from step 1.
    [css]
    /* This is where we set the icon image for each icon by specifying what area of the sprite to display.
    All other properties will be inherited from above so we can easily change the styling for all icons at once.*/
    .one
    {
    background-position: 0 0;
    }
    .two
    {
    background-position: 0 -16px;
    }
    .three
    {
    background-position: 0 -32px;
    }
    .four
    {
    background-position: 0 -48px;
    }
    .five
    {
    background-position: 0 -64px;
    }
    /* END ICON CSS */
    [/css]

When I was originally writing this tutorial, I found it somewhat hypocritical writing about how beneficial sprites can be for a website while using very few on this site. I created a sprite for my own site consisting of various images that are reused throughout my site. Have a look… sprite.png . It ultimately shaved off around 12-15 requests per page, which I’ve found has made a significant improvement in loading time for my website. If you don’t already have it installed, you should grab FireBug and more specifically YSlow which can help you benchmark your site and measure loading time.

Lastly, if you’re looking for an icon set to use on your own site check out Silk Icons at famfamfam.com. This is definitely one of my favorite icon sets, and is by far the most complete set I’ve come across (and it’s FREE).

CSS Tutorials

  1. September 12th, 2013 at 08:06 | #1

    Css code is very long code but not difficult language css so simple language.

  2. arabellaanwen
    January 1st, 2014 at 23:39 | #2

    The use of social media for small business will vary depending on the type of business and the intent it is being used for. Below are four important areas to consider in social media marketing.
    aytech

  3. arabellaanwen
    January 1st, 2014 at 23:39 | #3

    The use of social media for small business will vary depending on the type of business and the intent it is being used for. Below are four important areas to consider in social media marketing.
    aytech

  4. May 12th, 2014 at 20:18 | #4

    I'm not acquainted with Joomla's framework. I would suggest going to the community on the Joomla ! web page and asking there. I was looking at your resource rule on your webpage. You have six design linens connected to that web page, so if it were me, I would just look through each one for the features I want to specify for IE and modify them as I discover them.

  5. June 1st, 2014 at 01:12 | #5

    it sells American food almost exclusively and is run by a very nice Japanese couple. If you are in coke or Mississauga it's very easy to get to

  6. johan smith
    August 21st, 2014 at 12:03 | #6

    Thanks a ton Jason. Just a note though. The gill_updates_exclude() function must be "inside" your main plugin's php file. Otherwise if you have it in the file pointed to by require_once(), it will try to exclude the require_once file, not the main plugin. To simplify, just include all the gill code in your main .php file.
    http://productreviews24.com

  7. October 17th, 2014 at 15:14 | #7

    Thank you so much for this tutor. I am in college doing HTML course CSS was my hardest subject. now I can do good in it. dissertation service also helping me to get through it. Thanks to all

  1. No trackbacks yet.