Home arrow Style Sheets arrow Creating Rollover Effects with CSS Sprites

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
Rating: 4 stars4 stars4 stars4 stars4 stars / 26
February 12, 2007
  1. · Creating Rollover Effects with CSS Sprites
  2. · Creating rollover buttons with CSS: a traditional approach
  3. · Improved rollover buttons: using a CSS sprite-based approach
  4. · Completing the CSS sprite-based rollover example

print this article

Creating Rollover Effects with CSS Sprites
(Page 1 of 4 )


As the experienced web designer that you probably are, I'm sure that you've been using the neat capabilities offered by CSS to create and polish the look and feel of numerous web sites. As you know, armed with a respectable background on the different rules that comprise the CSS specification, it's feasible to do all sorts of clever things, like developing consistent, cross-browser web page layouts, styling several elements of a web document, creating eye-catching navigation bars, etc. And certainly the list goes on and on.

If all these things that I mentioned above are pretty familiar to you, then creating CSS-based rollover links also has been part of your experience as a web developer. Indeed, the capabilities that come packaged with CSS are truly remarkable either for developing text or image-based rollover buttons, which are commonly included into many modern web sites.

However, and now speaking more specifically, there's a known issue associated with image-based rollovers, even when they've been created with only a few CSS styles. As you may guess, the different background images that are used for creating the rollover in question are downloaded progressively by the browser, which introduces a small (but noticeable) lag the first time the mouse hovers over the rollover element.

Logically, this problem isn't present subsequently, since the respective background images has been cached by the browser, which implies that the delay disappears. Nevertheless, at this time maybe you're wondering: can this annoying lag be fixed without using any JavaScript code?

Fortunately, the answer to this question is yes! The issue in question can be addressed by using a technique popularly known as a "CSS sprite." It consists of creating only one background image, but in this case, this image contains different sections that correspond to each state of the rollover element. Pretty good, right?

Having created this "special" background image, the rollover effect can be easily created via CSS, by changing its position according to the stages of the link where the rollover will be visible. Besides, this approach has an additional advantage, since it requires working with only one image, something that decreases the number of requests made by the browser.

Having outlined generally the logic that stands behind the concept of CSS sprites, in this three-part series I'm going to show you how to put this technique to work for you quickly, not only if you want to create rollover buttons, but also in cases where you need to include dynamic banners, and simple gallery images as well.

Ready to learn how to include your own CSS sprites into your web site? Okay, let's get going!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials