CSS3: Shadow only without parent background - html

Question

I have a problem with CSS3 Shadows that I did not expirience before.
It seems like a box-shadow, that is applied to a div via the :before and :after selector, is only possible, if the container of the div has no background-color set.
Is there any way to make this possible?
<div class="container">
<div class="shadow-box">
test
</div>
</div>
The .container must not have a background-color set. I created an example on http://jsfiddle.net/v1utr15n/

Answer 1

You need to make sure that the .container will start a new stacking order. You can do this by either setting a position: relative; z-index: 0 or a opacity other than 1, e.g. opacity: .9999.
.container {
background-color: #fff;
height: 500px;
position: relative;
z-index: 0;
}
.shadow-box {
background-color: #fff;
position: relative;
width: 300px;
height: 300px;
}
.shadow-box:before,
.shadow-box:after {
content: "";
position: absolute;
z-index: -1;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
<div class="container">
<div class="shadow-box">
test
</div>
</div>
See http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ for some background information on z-index and stacking order context.

Answer 2

Put the code of the box-shadow in the shadow-box class, not in before or after.
URL: http://jsfiddle.net/v1utr15n/1/
.container {
background-color: #fff;
height: 500px;
}
.shadow-box {
background-color: #fff;
position: relative;
width: 300px;
height: 300px;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
.shadow-box:before,
.shadow-box:after {
content: "";
position: absolute;
z-index: -1;
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
<div class="container">
<div class="shadow-box">
Shadow box
</div>
</div>