Make it look like a page with shading

[dclardy]

I am trying to do some styling on my wife’s photography blog, and I have gotten the colors how we want them. The only thing that I am noticing is that I need some type of gradient to run along the sides where it changes from black to white.

The site is http://blog.delissaclardy.com. I would like to have something so that it looks like the black is sitting on top of the white. Is there an easy way to create a shading effect.

This is a drupal theme by the way. I am just modifying it to fit my needs.

Thanks.

[Johnny]

If you mean the white background (body) and you want the gradient to run from dark at the top to white at the bottom then set the background colour of the body to white in your css. Make a graphic that spans the width of the page and and a height of your choice with a gradient from black at the top to white at the bottom and set that in your css in the body and set to no-repeat. This will blend into the white at the bottom.

Your css could be:

Code:

body {background: #fff url(images/yourimage.gif) no repeat;width:960px;height:800px}

This is just a suggestion, there are many other ways but this is a quick and easy method for you.

[cramdesign]

Maybe check this out: https://css-tricks.com/snippets/css/css-box-shadow/
However, I have found that this can make some javascript lightboxes slow. Not always a problem though. Also this will only work in webkit/mozilla browsers… so no internet explorer.

[Johnny]

oops my bad!

I thought you meant a background image for the body! :D

[cramdesign]

Johnny… A background image for the body might actually work better due to the problems I mention. I just wanted to mention the options. The problem with an image would be the extra download and it is less flexible but there are trade offs to everything I guess.

[Author]

Posts