Как создать теней для теней, имитирующих несколько глубин

Question

Скажем, я хочу имитировать 2 разных слоя объектов, на фоне. Объекты на первом уровне должны иметь большую тень, а объекты на втором уровне должны иметь меньшую тень.

Теперь, если объекты на переднем слое перекрывают объект на втором уровне? Затем он должен иметь большую тень на фоне, но меньшую тень на объекте второго уровня.

Вот пример того, что я ищу:

Может ли этот эффект достигается с помощью CSS? Даже фильтры SVG или что-то в этом роде? Есть идеи?

Answer 1

вы можете использовать псевдо увеличить часть тени:

div { 
 
    height: 150px; 
 
    padding-top: 50px; 
 
    margin: 3em; 
 
    width: 300px; 
 
    box-shadow: 2px 2px 5px; 
 
} 
 
p { 
 
    margin: 2em; 
 
    position: relative; 
 
    box-shadow: 2px 2px 5px; 
 
    height: 50px; 
 
    width: 500px; 
 
    background: white; 
 
} 
 
p:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 265px;/* offset value to mind */ 
 
    box-shadow: 5px 5px 5px #333; 
 
    pointer-events:none; /* takes it off the way, else negative z-index might do also */ 
 
}

<div> 
 
    <p> 
 
    </p> 
 
</div>

размер, маржа и обивка для демонстрационной цели, использовать реальное содержание :)