Generate a CSS Sprite
Roll over each of the two sprites below to see the difference between the two types of sprites this generator can create.
Normal SpritesNormal sprites merely change their color when you roll over them, like the one below: click
Pressed SpriteA "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:
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:
- One simply changes color
- The other, appears to be pressed as the text shifts by one pixel down and a pixel to the right
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:
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.