影で立体感を出す

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

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

数字4つと色で決まる

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

横は 0、縦は少し下、ぼかしは大きめ。これで真上から光が当たったときの自然な影になります。色は rgba で書きます。最後の数字が不透明度で、0.08 はほとんど透明という意味です。影は濃くすると一気に安っぽく見えるので、薄く広くが基本です。

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

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

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

1. h1 に薄い text-shadow を足す
2. .section に薄い box-shadow を足してカードを浮かせる
3. .work-card に transition を足し、.work-card:hover で持ち上げと影を付ける