How do I apply a dropshadow to a div. Like you see on some sites.

[midi25]

Hi I have seem many good CSS site that have some nice Dropshadow effects applied to their divs. Almost like they have assigned :

DropShadow-Right:Solid 2px #000;

I know thats not the correct syntax but hope you get what I am trying to say.

How can I apply drop shadows along my border lines.?

Thanks

[benihana]

number of ways to do this.

If you know your div will be a fixed width, one of the simplest is to use a graphics package to mock up what you want the div to look like, with borders and the shadow drawn in. Then take a pixel high slice of that graphic and apply it as background to the div. The actual pixel width of the div will have to be a lttile wider than it will look on screen to accommodate the dropshadow.

Then, back in the graphics prog, take a slice that contains the bottom border and shadow (assuming your using the standard right and bottom shadow setup).

In an ideal world, youll have an element directly below the div you are applying the shadow to, and you can apply the bottom shadow graphic as a background to that element, with no-repeat. If there is no element you can use underneath, you may have to apply a non-semantic extra div and apply the graphic to that.

Hope this makes sense!

[midi25]

I kind of get you.

an example is :

To create a pixel line and apply a dropshadow in eg PS. Then take a slice.

Create leftpix content and rightpix divs

set the lefpix and rightpix divs as high and wide as the pixel slice and set the pixel as the background img.

And then set the height = to pixel height and width to any value of the content div.