文字装飾

立体的な3Dテキスト

立体的に見える3DテキストのCSS

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

CSSの解説

text-shadowを使い、文字の下にぼかしのない薄い影を重ねることで高さを出します。以下のルールに従って、上から下に暗くなるグラデーションの影を作っていきましょう。

  • text-shadow : off-set-x|off-set-y|blur-radius|color を一括指定して影を作る
  • off-set-x(横方向のオフセット)は 0 にする
  • off-set-y(縦方向のオフセット)を徐々に高くして、下方向に影を1枚ずつ増やしていく
  • blur-radius(ぼかし)は 0
  • 影の色colorを徐々に暗くしていく

文字サイズを変更することも考えて、オフセットはpxではなくem単位で指定するのがおすすめです。また、影の色を文字色に合わせて調整するとより自然な高さが出せます。

影の数を増やすほど自然なグラデーションに、縦方向のオフセットを大きくすればより高さを出すことも可能です

応用CSS

色付きの立体文字

文字色を有彩色にする場合は、影の色を少し文字色に寄せると自然です。併せて、一番上の影(一番明るい影)にblur-radiusを指定することで、影の層の切れ目が分かりづらくなります。

また、あえて違う系統の色の影を付けるという手法もあります。少しサイケデリックな立体文字を作りたい時に使えそうですね。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

影に使う色はこちらのツールを使って調べましょう。
指定した色の明るい色・暗い色を作成するツール

斜め方向の立体文字

先ほどまでの立体文字とは違い、text-shadowの値off-set-xに正の値を入れて右へずらしています。

以下のサンプルでは、off-set-yと同じだけ右へずらすことで45度の角度で影を作っています。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.