SCALE — Build Lab

シャドウは奥行きの階層を表す

モーション

シャドウの強さで「浮いている度合い」を表現。常に同じ強度はNG。

Do 良い例

box-shadow: 0 1px 3px (カード) / 0 8px 24px (モーダル)

Don't 悪い例

全要素に box-shadow: 0 0 10px black(ベタ塗り)

シャドウは奥行きの階層を表す

:LiTarget: 原則

シャドウの強さで「浮いている度合い」を表現。常に同じ強度はNG。

:LiCheckCircle: Do(良い例)

box-shadow: 0 1px 3px (カード) / 0 8px 24px (モーダル)

:LiXCircle: Don’t(悪い例)

全要素に box-shadow: 0 0 10px black(ベタ塗り)