CSS Image Sprites — Part 1

On the latest website that I am working on, I decided to use the “image sprite” technique that I recently learned in a CreativeLive class, Website Makeover.

Often in websites, there is a need to create a series of several image links that are placed closed together (ie. navigation bars). When creating links you want to make the “active” and “hover” states visibly distinct. Traditionally, to create this effect, I would use at least two different images to create a “rollover effect”. While this works, the website has to upload both images. If you have several of these types of links, the load time required grows.

Using the image sprite technique, only one image is used and the site loads faster. Below is a sample of using one image sprite to create a series of social media links.

Here’s how to create the image for the image sprite technique.

1. Create your “active” button image using Photoshop (note: the border around these images is used only to show size in this demonstration)

2. Create your “hover” button image. This image should be identical to the first image but with some visual difference. For this example, I screened the image back by 40% to make it lighter.

3. Combine the images into one image using Photoshop. To do this, open the “active” button image and adjust the image height in the Image Canvas size. In this example, I doubled the height of the image, first anchoring the image to the top of the canvas. After this is done, copy and paste the “hover” button image into the clear area at the bottom. Save for web.

Styling the CSS
In order for this effect to work, you will need to style your CSS. See my next post for the CSS code used to style these social media buttons.

Tags:Tutorials, Web Design, Web Development