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 needed
- saves bandwidth (1 image is smaller than 8)
- reduces HTTP server requests
- faster page load
Sprite Rollover Example:
Method:
This CSS Sprite Demo was built with the help of CSS Sprite Generator.
CSS Code
#nav ul {list-style:none;}
#nav li {
/**adjust padding as needed**/
padding-top:45px;
font-size:1.2em;
list-style:none;
}
#nav 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;
}
#nav li a.item1 {
background-position: -45px -741px;
}
#nav li a.item1:hover,
#nav li a.item1:active,
#nav li a.item1:focus {
background-position: -45px -45px;
}
#nav li a.item2 {
background-position: -45px -912px;
}
#nav li a.item2:hover,
#nav li a.item2:active,
#nav li a.item2:focus {
background-position: -45px -216px;
}
#nav li a.item3 {
background-position: -45px -1083px;
}
#nav li a.item3:hover,
#nav li a.item3:active,
#nav li a.item3:focus {
background-position: -45px -387px;
}
#nav li a.item4 {
background-position: -45px -1257px;
}
#nav li a.item4:hover,
#nav li a.item4:active,
#nav li a.item4:focus {
background-position: -45px -561px;
}
Earn money from your website with
Lunarpages Affiliate Program.
HTML Code
<ul id="nav">
<li><a class="item1" href="somelink.html">Item 1</a></li>
<li><a class="item2" href="somelink.html">Item 2</a></li>
<li><a class="item3" href="somelink.html">Item 3</a></li>
<li><a class="item4" href="somelink.html">Item 4</a></li>
</ul>
Demos:
- Photoshop Tutorial - Box with Contoured Edges
- Bringing Image Slices into a CSS Layout
- CSS Disjointed Text Rollovers
- CSS Disjointed Menu Rollover
- Floats & Margins, 3 CSS Boxes
- CSS Menus
- CSS Sprites Demo I
- CSS Sprites Demo II
- CSS2 Captions on Floated Images
- CSS2 Sticky Text
- CSS3 Multi-Backgrounds
- Fixed Background Image
- Liquid Header
- Multi-Scrollbars
CSS Templates:
- Centered, Fixed-Width page with floats
- Centered, Liquid-Width page with floats
- I-Page, Liquid Header & Footer
- 1 Column, Fixed-Width Centered
- Faux Column, Fixed-Width Centered
- Right Column, Fixed-Width Centered
- 3 Column, Fixed-Width Centered
- 3 Column, Liquid Layout
- User Adjustable Page
- Horizontal & Vertical Centered
