CODEWITHSUNDEEP
css
user578895
user578895

Reputation:

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

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.

Upvotes: 18

Views: 28937

Answers (8)

rajatkn
rajatkn

Reputation: 31

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

Upvotes: 0

xec
xec

Reputation: 18024

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/

Upvotes: 11

Maurice
Maurice

Reputation: 3

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);
}

Upvotes: 0

Sidney Veiga
Sidney Veiga

Reputation: 727

If you need shadow on top only, this will do it:

.element 
{
    box-shadow:inset 0px 3px 3px #BBB;
}

Upvotes: -1

Thomas Decaux
Thomas Decaux

Reputation: 22661

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

Upvotes: 0

Anthony Graglia
Anthony Graglia

Reputation: 5435

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%;
}​

Upvotes: 6

xec
xec

Reputation: 18024

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;
}

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

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/

Upvotes: 1

Related Questions