Setting box-shadow to a group of HTML elements

Problem

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?

Problem courtesy of: Robert Koritnik

Solution

Maybe use a

div:after {

pseudo element

http://jsfiddle.net/2P964/

bit of a mug method but it works :)

Solution courtesy of: user1525612

Discussion

I have created a demo, as per my understanding of your issue. Write in comments if something is wrong! Demo Link

Discussion courtesy of: Sid

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

Discussion courtesy of: Victor Muller

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

Discussion courtesy of: vals

This recipe can be found in it's original form on Stack Over Flow.