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...