box shadow not going over background color of contained element

Tags:
ajax android angularjs arrays asp.net bash c# css database date dictionary eclipse eloquent function gcc git hibernate html java javascript jquery laravel laravel-4 laravel-5 linux linux-kernel mysql nginx php python r reactjs regex ruby-on-rails select shell sql sql-server sql-server-2008 string tsql twitter-bootstrap ubuntu version-control xml

box shadow not going over background color of contained element

Basically I have a side bar that has an inset box shadow and inside that sidebar is a list of elements whose background color is orange… I would like to be able to make the inset box shadow overlap the background color of the list item.

Here is an image of the desired effect:

enter image description here

And here is the effect I am currently getting:

enter image description here

Notice how my inset box shadow isn’t going over the orange background? How would I be able to accomlish this?

box-shadow on the parent element will not go over the child element the same as the background color of the parent doesn’t go over the child element’s background.. you will have to assign the box-shadow to the child as well.. this is a jsFiddle of the problem.

To solve this you will have to use something like this:

.child{
    -webkit-box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 1),inset -10px 0px 10px -10px rgba(0, 0, 0, 1);
    box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 1),inset -10px 0px 10px -10px rgba(0, 0, 0, 1);
}

This will create two shadows one from each side of the child element, which will look seamless with the parent’s box-shadow.

View this working jsFiddle

Recent Activity

Related Posts

.
.
.
.