I need to put a drop shadow on a site I am working on. It is a fixed width (775px) centered layout (css layout using a container div). I need the shadow to fall on the bottom and left side. I have been searching for hours on how to do this and I can't figure this out. I found plenty of tutorials on how to apply this effect to images, but nothing on how to apply it to a full page. I read this article: http://www.alistapart.com/articles/onionskin/ which seems to be what I want to accomplish, but I need it to go around my container div, not an image. I couldn't figure out how to adapt it either.

My brain hurts.

I really appreciate any help!

This would be easy to do with the CSS border property. You'd find the elemt that surrounds the whole page, and add the following CSS elements to it.

SOMETHING {
border: 4px;
border-top-color: 777777;
border-right-color: 333333;
border-bottom-color: 333333;
border-left-color: 777777;
}

You can mess around the with the size of the border and stuff. If you want the shadow to go the other way simply switch all of the 777777's to 333333's and the other way around.

F.Y.I. If you don't like the colors that those numbers give, all of the HEX codes that are the same character repeating 6 times is on a grayscale...000000 being black and FFFFFF being white.

Borders wouldn't work well since what she's looking for is a semi-transparent shadow. A transparent PNG would work for most browsers, except of course IE 6.

My take on this - I'd add a background to the div you want to have the shadow. The background would be the width of the div including the shadow on the right side. I'd then put a shadowed footer div in there, also with a background that includes the shadow.

Something like what I did here: http://www.sanomsfreeedgesalon.com

LadynRed, getting Server Not Found.

Originally Posted by joder

LadynRed, getting Server Not Found.

Same Here

Thank you coolkbk585. I tried that method and it didn't really look like I wanted. I appreciate your help though!

I kind of get what you are saying LNR. I was thinking that I might have to add something to the side and footer. Let me know if you update that link. Seeing an example would help me out a lot.
Thanks!

Maybe something like http://creativecoding.webforumz.com/...e-glamour.php?

The drop shadow I mean.

Sorry, I fixed the link.

Well, I finally got it. I would not recommend putting drop shadows on your web page. It is a pain in the you-know-what.

Anyway, I ended up putting an image on top of my main container, another image under my container, then I wrapped my container in another div. This div (I called it shadow container) is 15 pixels larger than my regular container div. I put a background image that repeats vertically inside the shadow container, and added 15px of left margin to my original container.
Not the greatest code, but it works!

Thanks for all your help!