3D 多層シャドウタイトル
これは text-shadow を何重にも重ねて、文字が分厚い立体ブロックに見える 3D タイトルです。同じ向きへ 1px ずつずらした影を 8 枚連ねることで、奥行きのある積み重なりを表現しています。手前側はブランドカラー、奥側は濃紺と色を変えているため、立体の側面と影が描き分けられて厚みが強調されます。
解説
これはtext-shadowを何重にも重ねて、文字が分厚い立体ブロックに見える 3D タイトルです。同じ向きへ 1px ずつずらした影を 8 枚連ねることで、奥行きのある積み重なりを表現しています。手前側はブランドカラー、奥側は濃紺と色を変えているため、立体の側面と影が描き分けられて厚みが強調されます。CSS のみで、アニメーションも JavaScript もありません。
影の枚数とずれ幅がそのまま「厚み」になるので、調整がそのまま見た目に反映される分かりやすい仕組みです。
使う場面とカスタマイズ
- ポップ・レトロ・ゲーム系のキービジュアルやバナー見出し
- 厚みは
text-shadowの枚数とずれの px を増減して調整 - 側面色は手前と奥の影の色を差し替えて変更
注意点として、影が右下に伸びるぶん実際の表示領域が広がるので、隣の要素との余白を確保してください。背景色と側面色のコントラストが弱いと立体感が出ないため、明暗差をつけると効果的です。静的な装飾なので動きに関する配慮は不要で、文字は実体の見出しに置かれています。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
立体の厚みを増やしたり減らしたりできますか
できます。text-shadow に並んだ影の枚数とずらす px が厚みの正体です。影を追加してずれを増やせば分厚く、減らせば薄くなります。すべて同じ向き（右下）にずらすのがコツで、向きを揃えないと立体に見えなくなります。
文字や側面の色を変えられますか
変えられます。文字本体の色は color、立体の側面に当たる手前側の影色と、最も奥の影色をそれぞれ差し替えれば配色を変えられます。背景色とのコントラストをはっきりさせると厚みが強調され、レトロやポップな雰囲気が出しやすくなります。