複数の深さをシミュレートするボックスシャドウを作成する方法

Question

背景の上にオブジェクトの2つの異なるレイヤーをシミュレートしたいとします。第1レベルのオブジェクトは大きな影を持ち、第2層のオブジェクトは小さな影を持つ必要があります。

さて、前面層上のオブジェクトは、第二層上のオブジェクトをどのように重なっている場合はどうなりますか？次に、背景に大きな影がありますが、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>

サイズ、余白やデモの目的のためにパディングが、実際のコンテンツ:)