SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how do i create a shadow effect for a variable size container

    hi

    i have a design im working on turning in to a html page. It has a shadow effect that runs down the right and bottom edges of the right page. NOw i dont have a problem doing this.......ive currently got it working on a page that i can predict the height of by creating a png and offsetting it behind the container div....problem is i need it to work on a page that varies in height. So i need the shadow to run down the right hand side for as long as the page is tall and then right under the footer.

    Any ideas on how to go about this? I know its goner involve a tiling image on the right but i cant think how to best marry this with the shadow along the bottom of the page

    Any ideas?

    thanks

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know this will sound like a stupid idea, but have you tried setting it as a background image and then tiling it vertically?

  3. #3
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    Yeah, have a container bkgnd. that's a skinny bar to go the width [+ beyond on the left if need be] and about 20px height with some CSS like:
    Code:
    div#container{
    background:#hex url(imgs/bkgnd_bar.png) repeat-y 0% 0%;}
    The footer shadow could actually go on that element - with extra space at the top and placed with 0% 100% in the css - to have the shadow always on the bottom.

    Good luck,
    El
    F-Fox 2.0 :: WIN :: el design :: US

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys,

    right i ended up doing a tiling image down the right like you said and like i thought and then positioned an image in my footer div that included the nice rounded corner of the shadow to join up the right and bottom shadows.

    It works on any page now matter how long/short the content is

    Thanks for your advice

  5. #5
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problemo el duderino ;-)
    F-Fox 2.0 :: WIN :: el design :: US


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
  •