CSS Sprites


Generate a CSS Sprite


Enter Your Button Text:
Indent (pixels):

Choose your button from the list below:

 




Roll over each of the two sprites below to see the difference between the two types of sprites this generator can create.

Normal Sprites

Normal sprites merely change their color when you roll over them, like the one below: click

Pressed Sprite

A "Pressed Sprite" will create an effect like a 'pressed button'. These are becoming more common. click

Code:

Here is the code for the CSS Sprites above:


 


 

Instructions

Rollovers are a cool and very popular way to make your site more interactive and engaging for visitors. When your visitor moves their mouse over a rollover button, it changes in some way to show that it’s clickable. We have made two types for our generator:

Some years ago JavaScript was the method of choice to create rollovers, it was used to swap the two button images. As you can see by our example, itworks, but relies upon JavaScript being enabled in the browser. It also adds a bit of extraneous code to your page, which means a longer download time and more coding for you. The other problem with these types of rollovers is that they may experience a delay in loading since two images must be loaded… so many have gotten around this problem with an image preloader…

This rollover was made with JavaScript and two images – Roll over it with your mouse…


Did you notice the delay?
(To fix this delay, which appears the first time the user rolls over the button, you should use an ‘image preloader’, or you can put the rollover images in a hidden div.)

Who needs all that trouble when you can do it with simple CSS?

The Better Way

Roll your mouse over this button, which is created using just HTML, CSS and a single image:

click

So how did we do that?
With CSS, there is a :hover pseudo-class. By using this pseudo-class, you can style a link both in its normal state and in its hover (rollover) state. By making the link a block element and giving it a background image, we can turn it into a button. We then simply slide the background image up and down to create the rollover effect. It is as if we are sliding a giant filmstrip in the back of a window.

To make this type of rollover work properly, you should have the normal and rollover images stacked in a single image. Here is our button image – it’s 150 pixels wide and 60 pixels high:

Here is the CSS that makes it all happen:

 

The HTML for the rollover would be just this:

How a Sprite Actually Works

A CSS Sprite is simply a background image that is partially hidden... Typically, only half of a sprite is seen at one time, either the top or the bottom, depending upon whether the mouse is hovered over the sprite or not.

This image illustrates how the sprite 'slides' behind the virtual (and invisible) window:

 

Some pages will have nearly all of their images in one giant sprite, which contains most of the site images. Such pages load very fast. Such comprehensive sprites are not for amateur developers. The homepage of ixwebhosting.com uses such a large sprite.

You can see their gigantic sprite here: Giant Sprite Page.

 

↑ Back to top