Tue, 2003-06-03 11:26
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.
Tue, 2003-06-03 12:45
#1
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.
Tue, 2003-06-03 13:05
#2
Dropshadow around a border?
Yeah -- I was afraid of that. Thanks.
Wed, 2003-06-04 04:22
#3
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:
Unfortunately, though, this is IE only, and will have no effect elsewhere.
Wed, 2003-06-04 07:35
#4
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.
Wed, 2003-06-04 09:27
#5
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