エレベーション／Elevation

ドロップシャドウを用いて要素が重なった場合の階層構造や奥行きを視覚的に表現することで、視認性の向上を図ることができます。

ドロップシャドウによるエレベーションの表現

エレベーション表現はドロップシャドウを利用します。2段階の重なりの表現を利用できます。
エフェクトスタイルの「Elevation/LV1」「Elevation/LV2」を利用でき、LV2はLV1を既に利用している場合に、さらに上の重なりを表現する場合に用います。

スタイル情報

Elevation/LV1

X:0, Y:1px, Spread:0, Blur:6px, #000000, opacity:0.3
X:0, Y:4px, Spread:3px, Blur:16px, #000000, opacity:0.1

Elevation/LV2

X:0, Y:2px, Spread:0, Blur:10px, #000000, opacity:0.3
X:0, Y:8px, Spread:5px, Blur:24px, #000000, opacity:0.1