立体影付き 3D テキスト
文字の右下に同じ色の影を1pxずつ少しずつずらして何重にも重ね、奥行きのある立体ロゴ風に見せるテキストです。色面の text-shadow を階段状に並べることで厚みを作り、最後にぼかしの入った影を一つ足して接地感を出しています。
解説
文字の右下に同じ色の影を1pxずつ少しずつずらして何重にも重ね、奥行きのある立体ロゴ風に見せるテキストです。色面の text-shadow を階段状に並べることで厚みを作り、最後にぼかしの入った影を一つ足して接地感を出しています。画像を使わずCSSだけで作るため文字を後から自由に編集でき、レスポンシブにも強いのが利点です。
使いどころ
- レトロ・ポップなキャンペーンページの見出し
- ゲームや子ども向けサービスの楽しいロゴ表現
- セール告知など、目を引きたいバナー的なタイトル
厚みを増やすには text-shadow の段を足し、ずらす方向を変えれば光源の向きも変えられます。立体の色は重ねた影の色（ここでは濃紺）を差し替えるだけで一括変更できます。背景色とのコントラストが効くほど立体感が際立つため、明るい背景に濃い影、という組み合わせが扱いやすいです。多くの影を描く重い表現なので、ページ全体で乱用せず主役の見出しに絞ると軽く保てます。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
立体の厚みを増やせますか？
増やせます。text-shadow に並んでいる影の段をさらに追加し、ずらす量を1pxずつ伸ばしていけば、より分厚い立体に見せられます。
影の色を変えるには？
重ねている影の色をまとめて別の色に置き換えれば、立体部分の色が変わります。最後のぼかし影だけは接地感を出す役割なので、薄い半透明のまま残すと自然です。