Border of child-element behind inset-shadow of parent

Question

I have a DIV with inner A-tags. The DIV has a inset-shadow on it's top border, every inner A-tag has a right border. It would look much better if the A-border would be behind the shadow, but per default, it's on top.

Please look at my jsFiddle. http://jsfiddle.net/X7475/

Any ideas welcome.

Solution:

I did it without an extra element by using the CSS:before pseudo-element like this:

.post-footer:before { -moz-box-sizing: border-box; box-shadow: 0 7px 7px -7px #000000 inset; content: " "; display: block; height: 7px; overflow: hidden; position: absolute; width: 100%; z-index: 1; }

Fiddle: http://jsfiddle.net/X7475/4/

Of course this is really pixel-shifting to it's finest, but I still think it's worth the visual effect.

Answer 1

If you can compromise 10px of the top of the clickable area of the a tags, here is a workaround to achieve what you need:

Demo: http://jsfiddle.net/X7475/3/

HTML:

<div class="post-footer">
    <div class="topShadow"></div>
    <div class="buttons"> 
        <a>7</a>
        <a>3w</a>
        <a>Raphael</a>
        <a>229</a>
    </div>
</div>

CSS:

.post-footer {
    background: none repeat scroll 0 0 #323232;
    height: 40px;
    text-align: right;
    z-index: 9;
    position: relative;
}
.topShadow {
    position:absolute;
    top: 0;
    left: 0;
    width:100%;
    height:10px;
    border-top: medium none;
    box-shadow: 0 10px 10px -7px #000000 inset;
    z-index:1;
}
.post-footer a {
    border-right: 1px solid #7E7E7E;
    color: #D3D3D3;
    float: left;
    font-size: 0.8em;
    padding: 12px 17px;
    position: relative;
}
a:hover {
    background-color:#f00;
}

You could've achieved this if border gradients were supported in all browsers. You would make a gradient border that looked like the shadow of the parent.

Answer 2

One solution is to put an element above and set a shadow on that. For example: http://jsfiddle.net/NAv4Q/43/

This way you don't block hover access to any part of the link buttons. The downside is that you have to make room for the extra element. (Not a problem if you already have an element there.)

The element needs to be at least as high as the shadow, otherwise the shadow becomes weaker (in Firefox at least).

<div class="shadow"></div>
<div class="post-footer">
    <div class="buttons">
        <a>7</a>
        <a>3w</a>
        <a>Raphael</a>
        <a>229</a>
    </div>
</div>

And the css:

.post-footer {
background: none repeat scroll 0 0 #323232;
height: 3.2em;
text-align: right;
z-index: 9;
position: relative;
font-size: 0.8em;
}

.post-footer a {
border-right: 1px solid #7E7E7E;
color: #D3D3D3;
float: left;
line-height: 3.2em;
padding: 0 1.5em;
position: relative;
}

.shadow {
height: 12px;
position: relative;
z-index: 10;
box-shadow: 0 12px 9px -2px #000;
}

a:hover { background: rgba(100,100,255,0.3); }