Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

foreground

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.

like image 802
Mark Avatar asked Mar 27 '12 08:03

Mark


People also ask

How do I inset a shadow in CSS?

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.

Can you transition box shadow CSS?

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.

How do you put a box shadow on the right side in CSS?

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.

How do you make a beautiful box shadow in HTML and CSS?

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 .


2 Answers

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/

like image 179
Mark Avatar answered Sep 22 '22 01:09

Mark


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.

like image 29
Goran Mottram Avatar answered Sep 20 '22 01:09

Goran Mottram