get CSS inset box-shadow to appear on top of inner backgrounds - css

Question

I want a CSS inset box-shadow to appear on top of the elements inside of the container with the box-shadow, specifically background colors of child-elements.
Demo: http://jsfiddle.net/Q8n77/
<div class="parent">
foo
<div class="content">bar</div>
</div>
<style>
.parent {
box-shadow : inset 0 0 5px 0 black;
}
.content {
background : #EEE;
}
</style>
Any ideas? Can do whatever with the HTML, but need to be able to click-through, so no 100% width/height DIVs on top of everything.

Answer 1

If all you need is to have the inset shadow show through background colors, you can use transparent rgba (or hsla) colors rather than hex codes;
.parent {
box-shadow: inset 0 0 5px 0 black;
}
.content {
background-color: rgba(0, 0, 0, .2); /* .2 = 20% opacity */
}
Demo at http://jsfiddle.net/Q8n77/7/

Answer 2

Not everyone has the ability to change HTML structure. If you can only access the CSS, you could try the following from this post: https://stackoverflow.com/a/13188894/491044
Alternatively, you can use a pseudo element:
HTML:
<div>
a
</div>​
CSS:
div {
height:300px;
color:red;
position:relative;
}
div:before {
content:'';
display:block;
box-shadow:inset 0 0 10px black;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}​

Answer 3

One possibility is to play with the padding.
.parent {
box-shadow : inset 0 0 5px 0 black; padding:.23em;
}
http://jsfiddle.net/jasongennaro/Q8n77/6/

Answer 4

you could try to position an overlay div on top of your parent with position: absolute; and give that the shadow (untested theory) with something like this:
HTML
<div class="parent">
<div class="overlay"></div>
foo
<div class="content">bar</div>
</div>
CSS
.parent {
position: relative;
}
.content {
background : #EEE;
}
.parent .overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow : inset 0 0 5px 0 black;
}

Answer 5

You can set box-shadow on both parent and child.

Answer 6

Adding this approach since this is how I solved my version of this problem.
I basically add a ::before, or another element with a drop shadow in the parent, but offset it so only the shadow part is showing. Also I give the parent a overflow:hidden. This way, the content should still be interactive. :)
Mileage may vary depending on exact markup of course. But thought I should add this here.
codepen: http://codepen.io/mephysto/pen/bNPVVr
.parent {
background:#FFF;
width: 500px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
.parent::before{
content:"";
display:block;
width:100%;
height:25px;
margin-top:-25px;
box-shadow : 0px 0px 25px 0px rgba(0,0,0,0.9);
}

Answer 7

I would like to add something with xec's answer.
I liked your suggestion. But I think it has to do with the transparency of the inner element. If the inner element has certain transparency then the shadow will appear.
Also, the strength of the shadow also depends on the transparency. The more transparent the inner element, the stronger the shadow and the strongest when the background color is transparent.
For example, if the background color is rgba(255,255,255,0.5) then the shadow will appear stronger than when it is rgba(255,255,255,0.7). And even if you use rgba scheme and your alpha value is 1 or the background color is rgba(255,255,255,1) then also the show will not show up.
Given that, it is not possible to show the shadow if the inner element has an opaque background color.
See the 3 examples here for reference: https://codepen.io/rajatkantinandi/pen/PoJgMMw?editors=1100

Answer 8

If you need shadow on top only, this will do it:
.element
{
box-shadow:inset 0px 3px 3px #BBB;
}