Grow your CSS skills. Land your dream job.

Make it look like a page with shading

  • # June 4, 2010 at 12:07 pm

    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.

    # June 4, 2010 at 6:39 pm

    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.

    # June 6, 2010 at 3:56 pm

    Maybe check this out: http://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.

    # June 6, 2010 at 4:34 pm

    oops my bad!

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

    # June 9, 2010 at 2:07 pm

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".