box shadows on multiple elements at same level but without overlap?
If you can use filter and drop-shadow then you can apply a drop-shadow to the container. This shadow differs as it conforms to the alpha channel of the image (in this case, the outline of the content) instead of a simple rectangle:
body {
background: darkgrey;
padding-top: 50px
}
#box-one,
#box-two {
background: white;
width: 200px;
height: 200px;
margin: auto;
position: relative;
}
#box-one {
left: -50px;
z-index: 1;
}
#box-two {
right: -50px;
z-index: 1;
}
#top {
filter: drop-shadow(0 0 20px black);
}<div id="top">
<div id="box-one"></div>
<div id="box-two"></div>
</div>You can consider drop-shadow filter on a parent element:
body {
background: pink;
}
.b1,
.b2 {
width: 150px;
height: 150px;
background: #fff;
}
.b2 {
margin-left: 100px;
}
.container {
filter:drop-shadow(0 0 10px #000);
}<div class="container">
<div class="b1"></div>
<div class="b2"></div>
</div>Or use an extra element to hide the overlapping shadows:
body {
background: pink;
}
.b1,
.b2 {
width: 150px;
height: 150px;
background: #fff;
box-shadow: 0 0 13px #000;
position: relative;
}
.b2 {
margin-left: 100px;
}
.b1:before,
.b2:before {
content: "";
position: absolute;
bottom: 0px;
right: 0;
left: 0;
height: 15px;
background: inherit;
z-index: 1;
}
.b2:before {
top: 0;
bottom: initial;
}<div class="container">
<div class="b1"></div>
<div class="b2"></div>
</div>You can also build this using only one element:
body {
background: pink;
}
.container {
width:250px;
height:300px;
background:
linear-gradient(#fff,#fff) top left,
linear-gradient(#fff,#fff) bottom right;
background-size:150px 150px;
background-repeat:no-repeat;
filter:drop-shadow(0 0 10px #000);
}<div class="container">
</div>