Results 1 to 2 of 2

Thread: Full page drop shadow

  1. #1
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Full page drop shadow

    I'm learning CSS and creating a blog at annieagarwal.com/blog (again, work in progress!)

    I want to recreate the shadow on the sides of the main container of this blog http://www.robincornett.com/

    How do I do that?
    The blog has two style sheets
    http://www.robincornett.com/wp-conte...oto2/style.css
    http://www.robincornett.com/wp-conte...stom.css?55140

    My style sheet is at
    http://annieagarwal.com/blog/wp-cont...ious/style.css

    I created a png of the shadow that is 1000px wide at http://annieagarwal.com/blog/wp-cont...ges/shadow.png

    But I can't seem to get the code right. I want to use a background image/color along with the container having a drop shadow.

  2. #2
    Join Date
    Jun 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The way I do this is to have 2 containers, an inner and an outer container. Make your shadow graphic with a height of 1 pixel and a width of about 10 - 20 pixels depending on the depth of your shadow. You will need 1 graphic for the left side and 1 for the right side.

    You can then use css background to paste the graphics to each side:

    Code:
    #innerWrapper {
    background: url('image path') top left repeat-y;
    }
    and

    Code:
    #outerWrapper {
    background: url('image path') top right repeat-y;
    }

    replacing image path with the path to your images.

    You will have to mess about with the padding on the outer wrapper depending on the size of your graphic. Hope this helps

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •