How do you get the shadow of the CSS paste window in front?

Question

I have a list:

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

When I put the background color in the <li> nodes, the window shadow (insertion) located on the <ul> node will be hidden. Is there a way to get the inner shadow <ul> in the foreground so that it overlaps the background color of the <li> nodes?

ON REQUEST HERE A SAMPLE: http://jsfiddle.net/JbAEL/ Hover over the elements and you will see that the red color of the background will overlap the inner shadow, removing the effect.

Answer 1

HTML and CSS rely on a strict set of certain logic and, unfortunately, have no way to arrange the contents of the element and its background through z-index independently and intertwine them with different elements (as far as I know, m is known).

Here is one proposed method, it is not the most ideal of solutions, but sometimes violating the rules, includes pollution. Apply a shadow to each of your li elements and shift the shadow depending on which element it is on the list: top, bottom, or any element between them.

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 on the following jsFiddle and it seems to work fine in Firefox 11 and IE9, but can't guarantee for other browsers.

Answer 2

Speaking of a dirty approach, since there is no foreground property;) I decided to make a relative UL node, add it using the div node to the absolute, which carries an inner shadow.

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

Answer 3

background-color li falls over shadows. If you want to keep 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 opacity. This will retain the shadow of the insert, but the color overlay will become a little faint.