Time for action – adding a gradient and button images

Let's use what we learned about gradients and background images to make our application look more interesting. First, we'll add a gradient to the background of our task list application. We will add a linear gradient to the <div id="app"> element. It will start with our previous background color at the top and fade into a dark blue color at the bottom. Notice how we keep the old background color as a fallback for browsers that don't support gradients:

#app
{
    margin: 4px;
    background-color: #bbc;
    background: -webkit-linear-gradient(top, #bbc, #558);
    background: -moz-linear-gradient(top, #bbc, #558);
    background: -ms-linear-gradient(top, #bbc, #558);
    background: linear-gradient(top, #bbc, #558);
}

This is how it would look:

Now let's use CSS sprites to add images to the buttons in our task list application. We need images for delete, move up, and move down. Our buttons will be 16x16 pixels, so our images will need to be the same size. Since we have three images, we will create a sprite sheet that is 48 pixels wide and 16 pixels high. We will put our sprite sheet image file named icons.png into the images folder.

Now let's open taskAtHand.css and add the styling to get the images out of the sprite sheet and into the buttons. First, we will change the style that applies to all the task buttons to set the size to 16x16 pixels and the background image to our sprite sheet. This way, we only have to specify the sprite sheet image once and it will apply to all of our buttons:

#task-list .task .tools button
{
    margin: 0;
    padding: 0;
    border: none;
    color: transparent;
 width: 16px;
 height: 16px;
 background: url(images/icons.png);
}

Now all of our buttons will use icons.png as their background. All we have to do now is set the background positions for each button so they align with the correct image:

#task-list .task .tools button.delete
{
    background-position: 0 0;
}
#task-list .task .tools button.move-up
{
    background-position: -16px 0;
}
#task-list .task .tools button.move-down
{
    background-position: -32px 0;
}

What just happened?

Take a look at the application in the browser now. We added a gradient so it's not so dull and flat anymore. Now it looks modern and chic. We added images to the buttons using CSS sprites to extract the images from one sprite sheet image. Doesn't this look at lot better with real icons for the buttons?