다중 깊이를 시뮬레이트하는 박스 쉐도우 생성 방법

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>

크기, 여백 및 데모 목적을 위해 패딩, 실제 내용 :