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?

Answer 1

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.