CSS3 Borders and Gradients

Question

I have an HTML CSS Query.

I have the following JS Fiddle. http://jsfiddle.net/NC9NL/ If you look at this fiddle you will see I have two divs either side of the main content to give it the gradient effect. These two divs left and right are set at 100%;

However when the main content is larger than this e.g. needs a scroll bar these other two divs do not follow it down the page. Does anyone know how I can accomplish this.

Cheers,

Don't paste your code like that into jsFiddle. Put the CSS into the CSS panel and the contents of the `` in the HTML panel — Ana, Oct 17 '12 at 11:34

score 2 · Accepted Answer · answered Oct 17 '12 at 10:38

2

I think you don't really need those additional columns. Just combine both gradients into one and assign it to the main column:

.container_body {
    background: #fff;
    background: -moz-linear-gradient(left, #c6c6c6 0%, #ffffff 2%, #ffffff 98%, #c6c6c6 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#c6c6c6), color-stop(2%,#ffffff), color-stop(98%,#ffffff), color-stop(100%,#c6c6c6));
    background: -webkit-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    background: -o-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    background: -ms-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    background: linear-gradient(to right, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c6', endColorstr='#c6c6c6',GradientType=1 );
}

answered Oct 17 '12 at 10:38

feeela

29,399
7
59
71

Why is one side darker than the other – TheMonkeyMan Oct 17 '12 at 11:25
I don't know – it looks the same in my test case. – feeela Oct 17 '12 at 11:27
I agree, there is no need for extra containers. However, I do have two observations: 1) the `-ms-linear-gradient` line is not needed. IE9 does not support CSS gradients and IE10 supports the unprefixed version and 2) the filter gradient won't work right. For IE9, the gradient could be emulated using `box-shadow`. Also, I see no need for using the old WebKit syntax unless support for older Android is required. – Ana Oct 17 '12 at 11:30
@Ana This code was quickly generated using http://www.colorzilla.com/gradient-editor/ – feeela Oct 17 '12 at 12:03

CSS3 Borders and Gradients

1 Answers1