Question

Experimenting with the CSS3 box-shadow property, I was wondering if you could prevent the object casting it to clip the shadow. In the following code the DIV casting the shadow is invisible, but the shadow is clipped nonetheless. Is there a way to get this done in CSS? Also maybe in JavaScript / JQuery? Or is the only way to set the box-shadow offset larger than the DIV, and reposition the shadow (not very elegant).

div#shadow
{
    position: absolute;
    background-color: transparent;
    top: 100px;     
    left: 100px;
    width: 300px;
    height: 200px;
    box-shadow: 100px 100px 100px gray;
}

Answer 1

I am not a fan of position elements off the page, but that might be a good way of doing it?

div#shadow {
    position: absolute;
    background-color: transparent;
    top: 100px;     
    left: -9999px;
    width: 300px;
    height: 200px;
    box-shadow: 10199px 100px 100px gray;
}

Give the left property a large negative value, then give the box-shadow‘s left property a figure calculated using this formula:

0 - actual negative left + desired left + original box-shadow's left

So for your example above, it would be:

0 - -9999 + 100 + 100 = 10199

You can see it working in this jsfiddle.

The only other way I could see would be to match the border-radius and background-colour of the div so that it matched the shadow. The border-radius would be 100px in this case, but I couldn’t match the background-color at all and off course it would change with different colours or images.