Reputation: 105029

Setting box-shadow to a group of HTML elements

I have two elements that are positioned so their sides touch. They have different dimension/size on the touching side. Both of them need to have a shadow underneath.

The problem is that one of the shadows is always overlaying its sibling element. I can play with z-index but that just means that I will select which of the two will be overlaid by sibling's shadow.

It would be great if one could add a shadow to a group of elements in which case shadow would be rendered behind the group without any element interference and regardless of their z-index vertical ordering.

Is it possible to achieve a similar effect in CCS3 without resorting to shadow images?

Upvotes: 2

Answers (4)

Victor Muller

Reputation: 49

If there are pictures inside, why just not to have 4 divs? Two are for shadow, then two are on the top, same coordinates and no shadow, just background-image

Upvotes: 0

vals

Reputation: 64164

One alternate way would be using clip:

div {
    display: block;
    box-shadow: 0 0 10px 2px black;
    background-color: #fff;
    background: linear-gradient(180deg, red, white 30px);
}

#one {
    height: 200px;
    width: 200px;
    margin-left: 50px;
    position: relative;
}

#two {
    height: 50px;
    width: 50px;
    margin: 0 0 0 -50px;
    position: absolute;
    clip: rect(-10px, 50px, 100px, -10px);
}

demo

Pros: You can use the full extent of the divs (as demontrated by the gradient background)
Cons: The div number 2 has to be absolute positioned to work (well, or fixed; but anyway no any position that you want

Upvotes: 0