Achieving a recessed container effect with CSS3 Box-shadow

Question

My content is wrapped in a div which has an inset box-shadow, to try and give the effect that the content is recessed into the page. The problem I have is that any items of content that come close enough to the edge to overlap the shadow hide the shadow rather than having the shadow overlaid on top of them. http://jsfiddle.net/wheresrhys/Y8tXW/

Is there a way, other than defining shadows on every element, to achieve the desired effect?

Do you have to have the divs taking up the full width? First thing that comes to mind is adjusting some widths and using padding so the nested elements aren't against the shadows, but "inside" of them. — cschneider27, Mar 08 '12 at 12:55
I can probably tweak the design to do this if there's no other way, but the recessed design does look a lot more effective when the background patterns go right up to the edge — wheresrhys, Mar 08 '12 at 13:07

score 2 · Accepted Answer · edited Mar 08 '12 at 14:42

2

You could use something like: http://jsfiddle.net/Y8tXW/5/

That is add an inner box with the style:

.overlay{
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    box-shadow: inset 2px 2px 4px 5px rgba(0,0,0,0.3);
    pointer-events: none; /* Makes sure the inner contents can still have mouse interaction*/
}

Assuming you want the other elements being covered by the shadow. For browsers too old to support box-shadow set display:none on the overlay. Alternatively, use the :before pseudo class to only add the overlay when it's needed.

edited Mar 08 '12 at 14:42

wheresrhys

22,558
19
94
162

answered Mar 08 '12 at 12:53

Qtax

33,241
9
83
121

1

I was going to suggest something similar, but instead of adding an extra HTML element I would definitely use the `:before` or `:after` pseudo elements. – powerbuoy Mar 08 '12 at 12:58
@powerbuoy, +1, using one of those is a better idea (if target browsers support it). – Qtax Mar 08 '12 at 13:04
2

The problem with this approach is that it disables any mouse interaction with the inner contents: http://jsfiddle.net/wheresrhys/Y8tXW/6/ – wheresrhys Mar 08 '12 at 13:05
2

`pointer-events: none;` to the rescue! Too bad it's not well supported tho. I don't see anything else you could do if you want the shadow over other elements. Relevant: http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie – Qtax Mar 08 '12 at 13:08
Damn you ie8! This would be the perfect solution otherwise - a very handy CSS property. Unfortunately the inner contents are highly interactive so I probably can't use this method, although most interaction is away from the edges so might be able to do something with a few narrow overlays hugging the edges – wheresrhys Mar 08 '12 at 13:13
@wheresrhys, http://jsbin.com/uhuto works in IE8. But why care about it? It doesn't have `box-shadow` anyway, so just don't have it there. – Qtax Mar 08 '12 at 13:23
@Qtax - good call, although I think the demo must use some additional clever trickery for ie8, unless this reference on pointer-events is wrong https://developer.mozilla.org/en/CSS/pointer-events – wheresrhys Mar 08 '12 at 14:40
@wheresrhys, I tried that link in IE8, it worked (altho you do not see the covered boxes, when they are uncovered you can see that they have been clicked). – Qtax Mar 08 '12 at 14:46
@Qtax - every browser that supports `box-shadow` also supports `:before` and `:after`. Regarding mouse interaction, perhaps you could make the element containing the shadow only as large as the shadow is? Depending on where and how the shadow is displayed that may not work though, but I did that for the white bar on this page: towejewels.com – powerbuoy Mar 08 '12 at 14:47
But having read the src it achieves the effect by using js to note the position of the squares and of the clicks and passing the click event from the overlay to the relevant square, not by using css – wheresrhys Mar 08 '12 at 14:49
@wheresrhys, all IE solutions use JS. – Qtax Mar 08 '12 at 15:03

score 0 · Answer 2 · answered Mar 08 '12 at 13:30

Instead of using a few empty elements to do this (which would prevent interaction with any elements at the edges), I would suggest using CSS3 border-images. If I'm not mistaken, borders will be drawn over the top of content (at least partially), without interfering with interactivity.

score 0 · Answer 3 · answered Mar 08 '12 at 14:06

Instead of adding position:absolute and disabling the content inside the div and also overlaying the shadow effect over the content, you can simply add padding to your .shadow div so that the content inside doesn't overlay the shadow effect.

Check this out http://jsfiddle.net/Y8tXW/12/

Achieving a recessed container effect with CSS3 Box-shadow

3 Answers3