[WIP] CSS sprites
Using CSS sprites can cut down on you bandwidth, a lot. It will reduce the amount of HTTP-requests needed for loading a page. CSS sprites are used for a bunch of things, but I'm going to talk about rollover buttons.
There are two ways of doing this: either add the text on your buttons in your graphics editor or add them via css. I prefer using the second one for menu's etc. The first way I use when creating Call to Action buttons or very complicated buttons with lots of layers.
First way:
1. Create a nice button in Photoshop (I'm going to refer to you gfx program as Photoshop from here):

2. Select the vector mask (Ctrl/Cmd + Click the mask thumb), the click the background layer and press Ctrl/Cmd + C to copy the exact size of the button. Then click File -> New to create a new file. The correct sizes should already be filled in, BUT you'll need to add the size of the shadows/glows/strokes first. The shadow & glow are behind the stroke, so you don't need to count for the stroke if you shadow/glow is larger.
3. Create a new group called "Normal" and copy the layers of the button to that group. You'd probably need to set the Global Light to 90° as it's set to the default again.






Cartoon Clouds
Mountains
Sunrise
Clouds
Green Clouds
None

















Help