Shared translucence across two elements (without overlap)? - css

Question

I'm pretty sure this can't be done. But there are a lot of clever people out there, so here goes...
I'm creating an UI shape using two elements that overlap. Essentially a large square with a round protrusion.
I'd like these two elements to appear as one object (which is easy to do by giving them the same background color and overlap them) but I'd also like to have this element look like it has a single drop shadow.
The catch is that drop shadows are translucent and where the two elements overlap, you will get a darker spot due to both shadow elements combining.
Example:
http://jsbin.com/maboputexa/1/
Because these are two HTML elements, I'm pretty sure there's no way around this and this is just how it is. For now, I'm going to try not using translucent objects and go with a flat solid color for the shadow. But if anyone knows of any tricks to make this work in CSS3 with all the new options, please let me know!
(Note that I'm not referring to box-shadow properties as that wouldn't work with two objects as there always would have to be one object on top of the other).

Answer 1

More for the fun of it than with a real use:
2 divs, having shadows that do not overlap, and transparency that don't overlap
Notice the technique to avoid the shadows overlapping: z-index auto on the divs, and the shadow set on an pseudo element with z-index negative.
And the technique to avoid the transparency overlapping is a little disturbing, since it needs not only a mix-blend-mode, but also putting the divs behind the image ...
But, as I said, it's a funny result ...
Should work in Chrome, FF and Safari (this one untested)
body {
background-color: gray;
font-size: 30px;
}
.test1 {
width: 300px;
height: 200px;
position: absolute;
left: 150px;
top: 150px;
background-color: #555;
z-index: auto;
}
.test2 {
width: 300px;
height: 200px;
position: absolute;
left: 10px;
top: 0px;
border-radius: 50%;
background-color: #555;
z-index: auto;
-webkit-animation: move 5s infinite;
animation: move 5s infinite;
}
#-webkit-keyframes move {
0% {left: 0px; top: 0px;}
33% {left: 300px; top: 20px;}
66% {left: 300px; top: 220px;}
100% {left: 0px; top: 0px;}
}
#keyframes move {
0% {left: 0px; top: 0px;}
33% {left: 300px; top: 20px;}
66% {left: 300px; top: 220px;}
100% {left: 0px; top: 0px;}
}
.test1:after , .test2:after {
content: "";
position: absolute;
left: 0px;
toop: 0px;
width: 100%;
height: 100%;
box-shadow: 4px 4px 8px 2px black;
border-radius: inherit;
z-index: -1;
}
.overlay {
width: 600px;
height: 600px;
background-image: url(http://placekitten.com/1000/750);
background-size: cover;
position: absolute;
z-index: 4;
mix-blend-mode: overlay;
pointer-events: none;
}
<div class="test1">test1</div>
<div class="test2">test2</div>
<div class="overlay"></div>

Answer 2

if the goal is to draw a shape with shadow you may look at svg wich will be made for this.
CSS has limits and is not really meant for drawing:
For the CSS trick with html element, background and shadow , you can easily do the background in this case, but the shadow part will be average and a lost of precious time IMHO.
See: http://jsbin.com/paqayorewo/1/ or run snippet below.
.shape1 {
width: 200px;
height: 200px;
background: rgba(0,0,0,.5);
position: absolute;
top: 200px;
box-shadow:-3px 3px 2px 0px,
50px 50px 2px -48px,
-50px -50px 2px -48px}
.shape2 {
width: 200px;
height: 200px;
border-radius: 100px;
position: absolute;
top: 100px;
left: 100px;
overflow:hidden;
box-shadow:2px -3px 3px, -20px -20px 3px -24px, -40px -15px 2px -40px, 8px 3px 3px -3px}
.shape2:before,
.shape2:after {
content:'';
background: rgba(0,0,0,.5);
position:absolute;
}
.shape2:before {
height:50%;
width:100%;
}
.shape2:after {
width:50%;
height:50%;
top:50%;
right:0;
}
body {
position:relative;
}
<div class="shape1"></div>
<div class="shape2"></div>