CODEWITHSUNDEEP
htmlcss
andrewm
andrewm

Reputation: 2642

How to create a CSS shade effect with a faded sidebar

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.

alt text

Upvotes: 2

Views: 13897

Answers (3)

Dave
Dave

Reputation: 11

img.shady 
{
     display: inline-block; 
     webkit-box-shadow: 0 8px 6px -6px black; 
     -moz-box-shadow: 0 8px 6px -6px black; 
     box-shadow: 0 8px 6px -6px black; 
     padding: 10px; 
     margin-bottom: 5px !important; 
     min-height: 240px; 
     width: 630px; 
     border: 1px solid #D7D7D7
}

Upvotes: 1

Kyle
Kyle

Reputation: 67204

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.

Upvotes: 2

Wai Wong
Wai Wong

Reputation: 2843

Your sidebar should use a png image that has an opacity/transparency, then the shaded sidebar will work with gradient background. (Note, IE6 wont like this solution, so you have to find an IE6PNG hack solution which can be found almost everywhere nowadays) For gradient background, either create a background image or use the css3 gradient

Upvotes: 0

Related Questions