I have a stage that I built for a website layout and want to use a drop shadow behind it, see below.

alt text

The box will grow taller based on the content inside, so I don't think I can fix the shadow as part of the page background.

need ideas/suggestions on how to accomplish this. The box will be built as a single DIV with CSS and jQuery controlling the curves and gradients, and the shadow itself is saved as an image. Presumably I'd enclose the shadow image inside its own DIV and the two of them would be positioned against each other somehow.

alt text


2 answers

This was chosen as the best answer

Wrap the content box in a div and put the shadow image as a background on that div set to bottom left, add margins to the box to push it away from the shadowbox edges, so the shadow shows properly. No matter how big the content box gets its parent will grow too.

You'll need an alpha png background shadow so you'll need something like DD_BelatedPNG to deal with older browsers.

Answered almost 7 years ago by Tony Crockford
  • thanks, sounds like it will work; I'll try it now and post back if I have any problems Stephan Hovnanian almost 7 years ago
  • bingo. thank you! Stephan Hovnanian almost 7 years ago
  • BTW Stephan, that looks great! albion01 almost 7 years ago
danwellman 5600

Couldn't you use the box-shadow CSS3 property and do away with a separate div just for the shadow? The shadow wouldn't look as rounded as your image shadow, but it would be more semantic...

IE could be supported maybe with the jQuery boxshadow plugin?

Answered almost 7 years ago by danwellman
  • Thanks and I appreciate the idea to move toward CSS3 properties for something like a drop shadow, but as you suggest it won't produce the same effect design-wise. The shadow I'm using in the image adds perspective not just depth, which a CSS-driven drop shadow would be limited to doing. It's more "designed" Stephan Hovnanian almost 7 years ago
  • Box shadows look absolutely nothing like the effect he's trying to achieve. Nathan Duran almost 7 years ago
  • Look at the OPs comment - 'but as you suggest it won't produce the same effect'. 'AS YOU SUGGEST'. It was an alternative suggestion which I stated wouldn't look identical. danwellman almost 7 years ago