STYLE SHEETS

Creating Rollover Effects with CSS Sprites

Using CSS sprites can reduce the lag for certain events on web pages, thus making your web site perform more efficiently and improving your visitor's experience. In this first article of a three-part series, you'll learn how to use CSS sprites in the creation of rollover buttons.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 17

February 12, 2007

TABLE OF CONTENTS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rollover Buttons using CSS sprites</title>
<style type="text/css">
    body{
       padding: 0;
       margin: 0;
       background: #fff;
    }

    h1{
       font: bold 24px Arial, Helvetica, sans-serif;
       color: #000;
    }

    ul{
       display: block;
       width: 150px;
       height: 25px;
       margin: 0;
       padding: 0;
       background: #fff url(buttons.gif) 0 0 no-repeat;
    }

    li{
       margin: 0;
       padding: 0;
       font: normal 12px Arial, Helvetica, sans-serif;
       color: #00f;
       overflow: hidden;
       list-style: none;
    }

    li a{
       display: block;
       width: 150px;
       height: 25px;
       margin: 0;
       padding: 0;
       background: #fff url(buttons.gif) 0 0 no-repeat;
       padding-left: 50px;
       text-decoration: none;
    }

    li a:link{
       color: #000;
       background-position: 0 0;
    }

    li a:visited{
       color: #00f;
       background-position: 0 -25px;
    }

    li a:hover{
       color: #c90;
       background-position: 0 -77px;
    }

    li a:active{
       color: #f00;
       background-position: 0 -51px;
    }
</style>
</head>
<body>
    <h1>Rollover Buttons using CSS sprites</h1>
    <ul>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Customers</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
   </body>
</html>

All right, that's all the client-side code that you need to create a set of five rollover buttons that uses one CSS sprite. You may want to test this example on your own machine, so I included a ZIP file that contains the all HTML files and background images shown here. I hope you enjoy using this CSS sprite!

Final thoughts

In this first part of the series, I showed you how to create a CSS sprite to implement a basic system of rollover buttons, which can be part of any navigation bar. As you probably realize, CSS sprites are a simple but extremely powerful concept, and can be used in other cases as well.

Based on this situation, in the next article I'm going to show you how to use a CSS sprite to quickly develop a dynamic banner. Therefore, I don't think you're going to miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.