Home Ask Login Register

Developers Planet

Your answer is one click away!

Colin February 2016

Box shadow based on z-index like Material Design

I've been looking at Material Design for a while and I wanted to recreate sheets of material merging together as seen in this video.

It looks simple but I just couldn't get the shadows to be working. Lets say each of the sheets has a z-index of 1. You would think the box-shadow of each element would fall behind the other element (because they are on the same z-index) but they actually stack.

I've tried putting the sheet and 'shadow' element in a container and making the sheet a higher z-index than the shadow but with multiple cards the shadow still appears above the cards.

So my question is: Is there a way to recreate these sheets merging together with the shadows of both always appearing behind the cards?

Thanks for reading!

Answers


LGSon February 2016

The trick if you want the shadow to show on all 4 sides but not overlap, like between div 1 and 2, is to use a pseudo element.

div {
  position: relative;
  width : 200px;
  height: 100px;
  background-color: #ddd;
  box-shadow: 0px 3px 3px #666;
  text-align: center;
}
div:nth-child(3) {
  margin-top: 20px;
}

div:after {
    content: "";
    left: 2px;
    right: 2px;
    height: 10px;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    box-shadow: 0px -1px 3px #aaa;
}
<div>1</div>
<div>2</div>
<div>3</div>

Post Status

Asked in February 2016
Viewed 3,380 times
Voted 9
Answered 1 times

Search




Leave an answer


Quote of the day: live life