Menu
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.
802
Note: By default, the shadow generates outside the box but by the use of inset we can create the shadow inside the box. Syntax: box-shadow: h-offset v-offset blur spread color | inset; Approach: To give the inset shadow to an element, we will use the box-shadow property.
Adding a CSS transition to animate the box-shadow of an element is a handy trick. It's a design technique that's often used on hover to highlight something. If you've used this effect you might have noticed that sometimes the performance can be sub optimal making the animation slow.
box-shadow: h-offset v-offset blur spread color; box-shadows values: h-offset: It is required and used to set the position of the shadow horizontally. The positive value is used to set the shadow on right side of the box and a negative value is used to set the shadow on the left side of the box.
The code for the shadow is: box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset; The keyword inset is used to specify that we want to use the shadow inwards and not the default behaviour that is outwards .
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/
179
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
