Alt-Web Design & Publishing
CSS Sprites Demo II
(text under icons)

Description:

In our previous CSS Sprites Demo, icons and text are on the same line. Here, we have added a little extra padding to bring text below icons. As before, we have combined 8 images for the buttons below (four default states and four rollover states), into a single image or sprite. Click on the screenshot below to see the full-size sprite. Then using CSS background-image properties, we mapped out which horizontal and vertical portions of the image to display where needed.

Advantages of CSS Sprites:

no complicated JavaScript
saves bandwidth (1 image is smaller than 8)
reduces HTTP server requests
faster page load

Supporting web browsers:

Internet Explorer 5.5, 6, 7, 8, 9. 10
Firefox 2+
Opera
Chrome
Safari

CSS Sprite Screenshot:

Sprite Rollover Example:

Method:

This CSS Sprite Demo was built with the help of CSS Sprite Generator.

CSS Code

#sprite ul {list-style:none;}

#sprite li {
/**adjust padding as needed**/
padding-top:45px;
font-size:1.2em;
list-style:none;
}

#sprite li a {
background-image:url(../Images/CSSSprite.jpg);
background-repeat:no-repeat;
/**adjust padding and line-height as needed**/
padding:80px 24px;
line-height:5em;
}

#sprite li a.item1 {
background-position: -45px -741px;
}

#sprite li a.item1:hover,
#sprite li a.item1:active,
#sprite li a.item1:focus {
background-position: -45px -45px;
}

#sprite li a.item2 {
background-position: -45px -912px;
}

#sprite li a.item2:hover,
#sprite li a.item2:active,
#sprite li a.item2:focus {
background-position: -45px -216px;
}

#sprite li a.item3 {
background-position: -45px -1083px;
}

#sprite li a.item3:hover,
#sprite li a.item3:active,
#sprite li a.item3:focus {
background-position: -45px -387px;
}

#sprite li a.item4 {
background-position: -45px -1257px;
}

#sprite li a.item4:hover,
#sprite li a.item4:active,
#sprite li a.item4:focus {
background-position: -45px -561px;
}

HTML Code

</ul>

Alt-Web Design & Publishing CSS Sprites Demo II (text under icons)