CSS shadow paper effect becomes disabled due to parent background color
I have this simple shadow paper effect for a div, but it gets destroyed when I set the parent background property. This is how it looks: http://jsfiddle.net/9qahjjwx/
Below is the code. How do I get around this assuming I am using a background color for the parent?
Html
<section class="block1">
<div class="onpaper effect2">
<h2>Has Background Color on the parent</h2>
<p>This block has background color in its parent that ruining the shadow effect (due to z-index?)</p>
</div>
</section>
<section class="block2">
<div class="onpaper effect2">
<h2>No Background Color</h2>
<p>This block has <b>no</b> background color in its parent by changing the class..</p>
</div>
</section>
CSS
.block1 {
background-color: #f7f4e8;
height: 200%;
}
.block2 {
height: 200%;
}
.onpaper {
margin:40px auto;
width:75%;
background-color: #d9d8c5;
padding: 3% 6%;
}
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-3deg);
}
.effect2:after
{
transform: rotate(3deg);
right: 10px;
left: auto;
}
+3
source to share
3 answers
You need to add the z-index to the container and set it below the shadows: http://codepen.io/pageaffairs/pen/AgFJe
.block {
position: relative;
z-index: -2;
}
+2
source to share
You can add another wrapper element in between, for example:
<section class="block">
<div class="in-between">
<div class="onpaper effect2">
<h2>Has Background Color on the parent</h2>
<p>This block has background color in its parent that not ruining the shadow effect</p>
</div>
</div>
</section>
CSS
.in-between {
position: relative;
z-index: 1;
}
It's ugly, but it works without setting a negative z-index for the parent (which might give you problems with the parent).
0
source to share