シャドウとtransformによるカードホバーリフト効果

カードリフトパターン

カードリフト効果は、モダンなウェブデザインで広く使われています。ユーザーがカードにホバーすると、強化されたシャドウとともにページから浮き上がるように見え、インタラクティブ性を示します。

CSSコード

.card {
  background: var(--surface);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transform: translateY(0);
  transition: transform 0.3s ease-out,
              box-shadow 0.3s ease-out;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

奥行きの錯覚

リフト効果は2つの同期した変化により機能します：

1. **translateY(-6px)**がカードを上方に移動
2. 拡大されたシャドウ（増加したblurとoffset）がページ表面からのより大きな距離をシミュレート

これらが一緒になって、実際の3Dトランスフォームなしで説得力のある3D奥行き錯覚を作り出します。

シャドウデザインのヒント

自然に見えるシャドウのために、要素が「浮き上がる」につれてoffset-yとblur-radiusの両方を増加させます：

状態	シャドウ
通常	0 1px 3px rgba(0,0,0,0.08)
ホバー	0 12px 32px rgba(0,0,0,0.12)

シャドウの不透明度が低いままであることに注目してください。重いシャドウは非現実的に見えます。blurの半径の増加（3pxから32px）がほとんどの仕事をします。

ボーダートランジションの追加

一部のデザインでは、追加の強調のためにボーダー色もトランジションさせます：

.card {
  border: 1px solid var(--border);
  transition: transform 0.3s ease-out,
              box-shadow 0.3s ease-out,
              border-color 0.3s ease;
}

.card:hover {
  border-color: var(--primary);
}