Коробчатая тень, основанная на z-index, как Дизайн материала

Question

Я некоторое время смотрел на Material Design, и я хотел воссоздать листы материала, сливающиеся вместе, как показано в this video.

Это выглядит просто, но я просто не мог заставить тени работать. Допустим, что у каждого листа есть индекс z, равный 1. Вы считаете, что тень каждого элемента будет отставать от другого элемента (потому что они находятся на одном и том же z-индексе), но они фактически стекаются.

Я попытался положить лист и элемент «тень» в контейнер и сделать лист более высоким индексом z, чем тень, но с несколькими картами тень все еще появляется над картами.

Так что мой вопрос: Есть ли способ воссоздать эти листы, сливающиеся вместе с тенями, которые всегда появляются за картами?

Спасибо за чтение!

Answer 1

Трюк, если вы хотите, чтобы тень отображалась со всех четырех сторон, но не перекрывалась, как между div 1 и 2, является использование псевдоэлемента.

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>