CODEWITHSUNDEEP
cssz-indexmaterial-designshadow
Colin
Colin

Reputation: 51

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!

Upvotes: 0

Views: 1049

Answers (1)

Asons
Asons

Reputation: 87251

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>

Upvotes: 1

Related Questions