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