影で立体感を出す

影は浮いている高さを表す

紙が机から浮くと、下に影ができます。画面の中でも同じで、影がぼんやり広いほど手前にあるように見えます。逆に影が無いと、背景に貼り付いた紙のように見えます。今回は箱に付ける box-shadow と、文字に付ける text-shadow を使います。

数字4つと色で決まる

box-shadow の値は「横のずれ 縦のずれ ぼかし 色」の順です。

.ticket {
  box-shadow: 2px 3px 10px rgba(80, 50, 20, 0.1);
}

例のチケットは横に 2px、縦に 3px ずれ、10px ぼかした影です。これで真上から光が当たったときの自然な影になります。色は rgba で書きます。最後の数字が不透明度で、0.1 は薄い影という意味です。影は濃くすると一気に安っぽく見えるので、薄く広くが基本です。

text-shadow も並べ方は同じで、ぼかしまでの3つと色を書きます。見出しの後ろにうっすら置くと、文字がわずかに浮いて見えます。

動きと組み合わせると効く

作品カードは、マウスを乗せたときに transform: translateY(-4px); で 4px 持ち上げ、同時に影を大きくします。持ち上がりと影が一緒に変わると、本当に手前へ浮き上がったように見えます。カードのもとのルールには transition を足して、この動きをなめらかにします。

translateY で上へ動かす

translateY は縦方向にずらす書き方で、マイナスの値なら上に動きます。たとえばチケットにマウスを乗せたとき、3px 上へ動かして影を広げると、持ち上がる感じを出せます。

.ticket {
  transition: transform 0.3s, box-shadow 0.3s;
}
.ticket:hover {
  transform: translateY(-3px);
  box-shadow: 2px 7px 14px rgba(80, 50, 20, 0.18);
}

演習では作品カードに加え、送信ボタンも上へ少し動かします。ボタンの transition は準備済みなので、ホバー時の移動だけを書き足します。

1. h1 に text-shadow を追加する。横 0、縦 2px、ぼかし 6px、色は rgba(31, 43, 70, 0.15) にする
2. .section に box-shadow を追加する。横 0、縦 4px、ぼかし 16px、色は rgba(31, 43, 70, 0.08) にする
3. .work-card に位置と影それぞれ 0.2s の transition を書き、.work-card:hover のルールで 4px 持ち上げる。ホバー時の影は横 0、縦 8px、ぼかし 20px、rgba(31, 43, 70, 0.12) にする
4. .submit-button:hover に 2px 持ち上げる transform を追加する。ボタンの transition は準備済み