Get CSS Inset Box-Shadow to Appear on Top of Inner Backgrounds

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

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/

How do you get a CSS inset box shadow on front?

HTML & CSS rely on a strict set of defined logic, and unfortunately do not have a way to order via z-index an element's content and it's background independently from each other and interweave them with different elements (as far as I'm aware).

Here's one proposed method, it's not the most ideal of solutions but sometimes breaking the rules involves getting dirty. Apply the shadow to each of your li elements and slide the shadow depending on which element it is on the list: top, bottom or any element in between.

HTML

<ul>
    <li><div>Elephant</div></li>
    <li><div>Monkey</div></li>
    <li><div>Snake</div></li>
    <li><div>Zebra</div></li>
</ul>

CSS

li
{
    overflow:hidden; height:30px;
}

li div /* middle items (default) */
{
    box-shadow                : inset 0px 0px 10px #000000;
    -ms-box-shadow            : inset 0px 0px 10px #000000;
    -moz-box-shadow            : inset 0px 0px 10px #000000;
    -webkit-box-shadow        : inset 0px 0px 10px #000000;
    line-height:30px; height:30px; margin-top:-30px; padding:30px 10px;
}

li:first-child div /* top item */
{
    margin-top:0; padding-top:0; padding-bottom:60px;
}

li:last-child div /* bottom item */
{
    margin-top:-60px; padding-top:60px; padding-bottom:0;
}

You can see the full code and demo at the following jsFiddle, and seems to work fine in Firefox 11 and IE9, but can't vouch for other browsers.

Inset box-shadow beneath content

You need to make a new element inside the div, with absolute positioning and height and width of 100%, then give that element the box shadow.

div {    height:300px;    color:red;    position:relative;}
div div {    box-shadow:inset 0 0 10px black;    position:absolute;    top:0;    left:0;    width:100%;    height:100%;}

<div>    <div></div>    a</div>

Why doesn't inset box-shadow work over images?

Because the shadow is part of the parent container it renders below the image. One alternative is to have a div which places a shadow overtop the image like so:

body {
  background-color: #BBB;
}

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  border-radius: 20px;
}

main img {
  border-radius: 20px;
}

.shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 3px 3px 10px 0 #000000;
  border-radius: 20px;
  top: 0;
  left: 0;
}

<main>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" />
  <div class="shadow"></div>
</main>

css inset box shadow top,left,right, image at bottom

try this:

jsFiddle

.container {
    box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.23) inset;
    padding:8px 25px 0;
    background: url("../bottom_image.gif") no-repeat scroll center bottom #FFFCD8;
}

<div class="container">
    <div class="child-container">FooBar</div>
</div>

How do you use an inset box-shadow with a background-color with before and after?

You didn't specify how you want to accomplish the borders. In your title you box-shadow, but in your description you try to do it with borders:

Row should highlight on hover, cell should highlight a different color on hover, row should have 4px border on hover but cells should not shift up/down on hover.

I didn't do it with an actual border. Instead, I set an outline and just set an outline-offset. This should be what you're looking for.

table {  border-collapse: collapse;}
table tr td {  border: 1px solid black;  padding: 5px;}
table tr:hover {  background: yellow;  outline: 4px solid blue;  outline-offset: -4px;}
table tr td:hover {  background: red;}

<table>  <tbody>    <tr>      <td>AAA</td>      <td>BBB</td>      <td>CCC</td>      <td>DDD</td>    </tr>    <tr>      <td>AAA</td>      <td>BBB</td>      <td>CCC</td>      <td>DDD</td>    </tr>    <tr>      <td>AAA</td>      <td>BBB</td>      <td>CCC</td>      <td>DDD</td>    </tr>  </tbody></table>

CSS: Place child element underneath parent element's inset box shadow?

Another solution that works with non transparent backgrounds:
Set the shadow on a pseudo element

CSS

#outer {
    border: 1px solid black;
    height: 200px;
    position: relative;
    width: 200px;
    background-color: white;
}

#outer:after {
    content: "";
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
    height: 100%;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
}

#inner {
    background-color: #55A8FF;
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
}

demo

---

Related Topics