One of the good things about CSS is that there are always different ways to complete a certain task. Wether it be getting your background to display correctly with a pattern or getting nice rollovers on your buttons. We will talk about the latter today, or whatever day you read this counts too. We are going to follow this step by step tutorial (which hopefully makes sense to more than just me) to recreate the list of social media buttons in the footer of our site.

Creating the Image Rollover

Here is the image before we create the rollover.

And here is the after, same image re-sliced but with the colors darkened on the buttons.

Now we take the two images in Photoshop and have to combine them to make our image for the sprite. Keep the original on the left side and the rollover on the right. Make sure the image is exactly twice the width of the original. The easiest way to do this is take the original image in Photoshop, go to Image > Canvas Size… We want to anchor the resizing to the left side of the image and set it to 200%.

Our image is now looking like this, the original image on the left and the right 50% is blank.

Now turn the Snap setting on and drag the rollover image onto the blank half of the new image. Make sure it aligns correctly or you will have weird measurements. Our image is now looking like this, original on the left and the rollover on the right side.

Now save it out for the web, you can choose png or jpg, its up to you. I chose jpg because I’m nostalgic. Don’t hate the pixelation. Pretend it’s nintendo.

Image Sprites - The HTML

Now that we have our sweet image it’s time to break out some good ol’ CSS. First thing we need to do is set up the unordered list in the HTML with each of the items we want to link to. If I had a lot of links I would go with a naming convention like: social-01, social-02, social-03 etc. But since I only have 5 I will give each list item it’s own id based on the name of the link.

 
Linked in 
twitter 
facebook 
digg 
StumbleUpon 

Ok, so what we have above is an unordered list that has an id of social with five list items in it. Each list item has a unique id so I will be able to control that specific li when I am laying out my links. Inside the li’s contains a link going to wherever I want to send it. Each link has a nofollow tag inside because these are sites that I choose not to send any link love to. I will explain why there is a span tag later. On the inside of the span tag put the text that is on the button, make sure it matches the text because if we hide it and Google finds out you are being sneaky sneaky you could get penalized. Or punched in the face.

Image Sprites - The CSS

Without any CSS, our list is starting to look like this:

That list is ugly. Don’t lie. Now it’s time to beautify it by adding a little bit of Cascading Style Sheet razzle dazzle.

Why does he keep saying razzle dazzle?

I don’t know. But read on, we are starting to get somewhere.

Styling the Unordered List

Like any other project, I believe that it is best to work from the largest parts of the document to the inside smaller ones. So we start by styling the ul first. Lets take the image we made earlier with the normal and hover states combined and turn it into the background image of the ul.

#social {
	background:url("img/social_btns.jpg") 0 0 no-repeat;
	width:113px;
	height:202px;
	margin:0;
	padding:0;
	}

With that piece of code my ul now has the background image of the non-hover state (the left side) of the image we created earlier. We set the width and height of the ul to the width/height of the SINGLE image we created, before the rollover was added to create the sprite. It looks like this:

Styling the List Items and Links

Now that we have a background for the ul it’s time we styled the list items and links. Each link and list item is the same size (because the buttons are all the same size,) and have equal spacing in between them. In Photoshop I have used my ruler to see that each button is 34px high, 113px wide, and all except the bottom link have 8px of space on the bottom.

This is also the time when the span tag comes in, I will set anything that is in the list between a span tag to display: none so it disappears and we still have the link that we created. Here is the CSS we are adding.

#social li span { display: none; }

#social li { float:left; list-style:none; position:relative; }

#social li, #social a {
	height:34px;	/* Each button must have the same height, define it here */
	display:block;
	margin:0;
	padding:0;
	}

li#linked-in, li#twitter, li#facebook, li#digg, li#stumble { margin-bottom:8px; width:113px; }
li#stumble { margin:0; }

With that our list is looking good finally, but it still doesn’t have hover states. You can see the current demo of it here. If you hover over the images you can see that there are no hover states, but in the bottom corner of the browser the correct link hrefs are showing up. This is good. We are almost ready to step into actually creating the sprite. Never mind we are ready, what an early Christmas present this is.

Creating the Image Sprite Hover States with CSS

Now that we have our list laid out with images showing, its time to give each of the links a hover state. The way the sprite will work is that we will tell that specific link to have a hover state, the hover state will be using the SAME image as the UL that we created earlier, but we will use CSS to make the correct part of the image show on the hover.

When a background image is displayed it always starts from the coordinates 0,0; or the top left corner. So what we have to do is tell the link to display the background image, but then use CSS to shift the coordinates so it displays the rollover part of the image. So we will have the statement of the background, then tell it to position it however many pixels it is so the background is in the right spot. Since it is 113px wide we will take it -113px horizontally, and depending on where the button is subtract how far we want it to go down.

Here is the CSS for the hover states which we add right below the previous block.

#linked-in a:hover { background:url("img/social_btns.jpg") -113px  -0px no-repeat; }
#twitter a:hover { background:url("img/social_btns.jpg") -113px  -42px no-repeat; }
#facebook a:hover { background:url("img/social_btns.jpg") -113px  -84px no-repeat; }
#digg a:hover { background:url("img/social_btns.jpg") -113px  -126px no-repeat; }
#stumble a:hover { background:url("img/social_btns.jpg") -113px -168px no-repeat; }

I measured the numbers like this:

discuss this topic to forum