Background gradients

When not using CSS3, if we want an element to have some sort of background gradient, we use a thin graphical slice and then tile it horizontally/vertically. As graphics resources go, it's quite an economical tradeoff. An image, only a pixel or two wide, isn't going to break the bandwidth bank and on a single site it can be used on multiple elements.

Linear background gradients

Let's start with this technique to make a linear background gradient for the sidebar of the AND THE WINNER ISN'T site:

aside {
    border-right-color: #e8e8e8;
    border-right-style: solid;
    border-right-width: 2px;
    margin-top: 58px;
    padding-left: 1.5%; 
    padding-right: 1.0416667%; 
    margin-left: 1.0416667%; 
    float: left;
    width: 20.7083333%; 
    background: url(../img/sidebarBg2.png) 50% repeat-x;
} 

Here's how it looks in a browser:

However, it still requires trips to the graphics editor when we want to amend the effect. Plus occasionally, content can 'break out' of the...