Creating Rollover Effects with CSS Sprites
(Page 1 of 4 )
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.
Introduction
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!
Next: Creating rollover buttons with CSS: a traditional approach >>
More Style Sheets Articles
More By Alejandro Gervasio
