CODEWITHSUNDEEP
cssforeground
Mark
Mark

Reputation: 18244

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

I have a list:

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Citrus</li>
</ul>

When I put a background color on the <li> nodes the box-shadow (inset) that is on the <ul> node will be hidden. Is there a way I can get the inner shadow of the <ul> on the foreground so it will overlap the background-color of the <li> nodes?

ON REQUEST HERE IS THE SAMPLE: http://jsfiddle.net/JbAEL/ Hover with your mouse over the items and you will see the red background color will overlap the inner shadow removing the effect.

Upvotes: 7

Views: 11020

Answers (3)

Mark
Mark

Reputation: 18244

Talking about a dirty approach, since there is no foreground property ;) I decided to make the UL node relative, append it with a div node at absolute that carries the inner shadow.

For a working version: http://jsfiddle.net/JbAEL/14/

Upvotes: 3

Abhranil Das
Abhranil Das

Reputation: 5916

The background-color of your lis fall on top of the shadows. If you want to retain the shadow, you can make the background color slightly transparent. Try changing background-color:red to background-color: rgba(255,0,0,0.1) say, where the last value is the opacity. This retains the inset box-shadow, but the color overlay will become a little faint.

Upvotes: 1

Goran Mottram
Goran Mottram

Reputation: 6304

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.

Upvotes: 2

Related Questions