5 replies [Last post]
Aubergine
Offline
newbie
Last seen: 16 years 15 weeks ago
Joined: 2003-06-03
Posts: 2
Points: 0

Does anyone know how to do a drop shadow around a border?

I'd like to create a "page-on-top-of-a-page" look on my site, by having a border around the main text body, and then giving that border a dropshadow. Radio Userland does this on their main site.

I'm editing one of Radio's existing CSS templates, with an existing plain border. I tried adding the "border-style: outset;" command at the end of the list of existing border attributes on the coding sheet for the page, but it had no visible effect.

Here's my lame-ass page, if you've just got to look. There's no content, just me trying to learn how to use the software. See, I told you.

Addendum: after checking examples at W3Schools, I see that the "outset" command would not have created the drop shadow effect I'm looking for. So this may not be a border issue. I'd still love to hear anyone's ideas on how this effect can be achieved.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 33 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Dropshadow around a border?

From what I can tell that effect is done with pictures (in some cases set as backgrounds) - it's not a built-in CSS thing.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Aubergine
Offline
newbie
Last seen: 16 years 15 weeks ago
Joined: 2003-06-03
Posts: 2
Points: 0

Dropshadow around a border?

Yeah -- I was afraid of that. Thanks.

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 14 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

Dropshadow around a border?

Actually, if you're developing for IE, there's a filter property that will render a drop shadow quite nicely - there's some good documentation at:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/dropshadow.asp

Unfortunately, though, this is IE only, and will have no effect elsewhere.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Dropshadow around a border?

A couple of ideas to think about.
1. have a containing div, ( div around your main div) that is slightly bigger and has the background color of the dropshadow you would like. then center the main div inside.
2. use a wide border and set the color to the dropshadow color and try different border styles such as outset, ridge or solid. Borders may look different in each browser try.

These ideas wont give you the exact same look but may be worth a try.

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 14 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

Dropshadow around a border?

Yet another approach would be to use border images to achieve the drop shadow effect, in exactly the same way you might implement rounded corners, as discussed here:

http://www.webweaver.org/dan/css/corners/fluidbox_nested.html