影 - IKYU Design Guideline 読み込まれました

情報の存在感を高めたい場合や可読性を上げる際に影を使用します。
ぼかしが大きすぎたり色が濃すぎる影は使用せず、上質さを感じられるような控え目な影を用途に応じて使い分けます。

Name

CSS

shadow-md

box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;

shadow-outline

box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;

shadow

box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px #0000001a, 0 1px 2px #0000000f;

shadow-sm

box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px #0003;

Hello World.

shadow-md

画面の中で特に優先してみせたい情報やアクションの対象となる要素に使用します。
使用箇所:ナビゲーション

Hello World.

shadow-outline

ホバーやクリックで情報を表示させ、浮き上がる表現を用いる場合に使用します。
使用箇所:検索モジュール、モーダル、吹き出し

Hello World.

shadow

同じ情報が連続して並ぶ場合に使用します。
使用箇所:カードUI

Hello World.

shadow-sm

背景から可読性をあげたいパーツがある場合使用します。
使用箇所:ボタンの機能を持つUIパーツ