HTML5 Web Application Development By Example Beginner's guide

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