Question

Hi I’m not too sure how to create the attached image effect where the right hand side is my main content and it shades onto my left sidebar which has a gradient effect downwards.

Answer 1

Check this out: CSS3 gradient Generator, pick the colors and generate the code, then add it to the body in your CSS (Or whatever element you want it on).

.body /*or element of your choice*/
-webkit-gradient(
{
    linear,
    left bottom,
    left top,
    color-stop(0.02, rgb(91,204,245)),
    color-stop(0.76, rgb(5,37,70))
)
-moz-linear-gradient(
    center bottom,
    rgb(91,204,245) 2%,
    rgb(5,37,70) 76%
)
}

For the shadow from your main content use:

.MyElement
{
box-shadow: 10px 10px 5px #888;
}

And also check out CSS3 Box-shadow.

Also, because not every browser supports the box-shadow yet (IE), you can use border images. But IE doesn’t suppport that either so, what I did on a site was to just make a 1px high PNG image of the shadow and set it as the background to my wrapper div, repeated it down/up (can’t remember if that’s X or Y) and it worked fine 🙂

Hope some of that helps.