01 / 05
影は「ずらした同じ形」
画面は平らなのに、ボタンが浮いて見えることがある。あれは同じ形を少しずらして下に敷いているだけなんだ。
この影を作るプロパティが box-shadow だよ。
.btn { box-shadow: 0 4px 0 #8c3d18;}見た目を作り込む
INPUT · スライド
影をつけて浮かせる
01 / 05
影は「ずらした同じ形」
02 / 05
値は4つ並べる
box-shadow の値は左から順に、
- 横のずれ … 右へ動かす量
- 縦のずれ … 下へ動かす量
- ぼかし … 影のふちのやわらかさ
- 色
いちばんよく使うのは「横 0・縦だけ下に」の形だよ。
.btn { box-shadow: 0 4px 8px #8c3d18;}03 / 05
ぼかし 0 は「板が重なった影」
ぼかしを 0 にすると、ふちのはっきりした影になる。ぼやけないので、厚みのある板が重なっているように見えるよ。
ボタンの「押せそう」な感じは、この厚みで作ることが多いんだ。
.btn { box-shadow: 0 4px 0 #8c3d18;}04 / 05
ぼかすと空気に浮く
ぼかしを大きくすると、影がやわらかく広がって空中に浮いたように見える。
カードやパネルを少しだけ持ち上げたいときは、こちらのほうが自然だよ。
.card { box-shadow: 0 6px 12px #cfd8cf;}05 / 05
影は控えめに使う
すべての箱に影をつけると、どれも浮いていて何も浮いていない画面になる。
押せるもの・大事なものだけに使うのが約束だよ。ここから書いてみよう。