SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fully resizable, fully shadowed box

    Hi all,

    I want to make a box that has shadows on all for sides (right and bottom shadow are a bit more distant). Then, the box hould be resizable, mmeaning fluid, so I guess I will need to place the images separatel for every side with their own divs.

    Is there an article / tutorial about this already? Oh and an optional thing is to make the shadows transparent, ut I think that will be very hard to do?

    Thanks for your help!

  2. #2
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could create an outer container with a padding all the way around, for instance 20px, solid black and set the transparency to something like 80%

    Or, you could create an outer container with padding all the way around of say, 20px. Then set the background to a repeating image of the shadow -- make the image about 3000px wide by 1px high. Good, for instance if you wanted to do a gradient or something.

    <style>
    #outerwrapper { background: url(img/shadow) repeat-y top left; padding:20px; }
    </style>
    intragenesis, llc professional web & graphic design

  3. #3
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hrm but if it is 3000px wide, the right side of the box will not have the shadow...

    What about the top and bottom sides?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There is a good article here about creating shadows etc.

    http://www.ploughdeep.com/onionskin/

    I think that covers all your needs except maybe transparency issues in ie6. You would need to use the alpha image loader for ie6 but could get a little messy.

  5. #5
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool thank you : )


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
  •