I'm new at creating sites using CSS, and I've always wanted to put a cool looking shadow around the edges of my web page (I usually work in fixed widths - normally 800 px wide).

I've looked at a few sites that do this and notice that most have a small background graphic, but how do you place it? Can anyone point me to a step-by-step tutorial (I'm as dumb as a rock).

Thanks!

Are you talking about something like this? sample






fastreplies

THAT'S what I'm talking about . . .

I didn't hear you saying thank you fastreplies

I am sure you know how to reap off that template




fastreplies

THANK YOU, THANK YOU, THANK YOU!!!!

I really "meant" to say thank you - I was just excited about trying it to a site I'm working on, but I really do appreciate your help.

Plus . . . I LOVE your avatar!

Riptide

Here is a really cool way you can do it with javascript and no images: http://www.ruzee.com/blog/shadedborder

Originally Posted by wayfarer07

Here is a really cool way you can do it with javascript and no images: http://www.ruzee.com/blog/shadedborder

Oh, that IS good wayfarer07! Thanks!

Reggie

I think it's easier to use single small bg image that has the shadow on it. I use it on a lot of my sites.

Originally Posted by LadynRed

I think it's easier to use single small bg image that has the shadow on it. I use it on a lot of my sites.

I agree. Javascript should only be used when its really required. (Like with certain IE workarounds or java functions.) There's nothing wrong with using a small image.

Yes, I agree. I only suggested the javascript because ncriptide indicated lack of css knowledge. The javascript functions that I linked to are extremely easy to use and degrade gracefully into a normal square box.

Sometimes I prefer a pure css alternative to drop shadows (no images). This involves offsetting a div by using negative margins. The creative use of borders adds a nice fade to the shadow. Easy, and no images! I'd be happy to elaborate if anyone would like to see this technique.