【CSS】text-shadowを使ったテキストの装飾パターンを色々作ってみた

すごく今更感がありますが、CSS3のtext-shadowを使ったテキスト装飾のサンプルを12個作ってみました。

多分ほとんどのコードがコピペでそのまま使えるので、使いたい人はご自由にどうぞ。色とかは各自のWebサイトに合わせてね！

基本パターン

See the Pen wpgXRa by Kuzlog (@Kuzlog) on CodePen.

至って普通のドロップシャドウ。何の面白みもないけど、使用頻度は一番高い量産型テキストエフェクト。

3D（立体）

See the Pen ypgqBX by Kuzlog (@Kuzlog) on CodePen.

影を下方向に1pxずつズラして、立体的に見せる手法。作ってみると意外と楽しい。

斜め3D（立体）

See the Pen BJpPzz by Kuzlog (@Kuzlog) on CodePen.

さっきのやつに横方向の移動も加えたバージョン。カーニングの加減によって微妙にダサくなるのが辛い（「Sample」の「S」と「a」の間とか）。

エンボス

See the Pen gomoOg by Kuzlog (@Kuzlog) on CodePen.

簡単に作れるけど、微妙にお洒落だし派手すぎないから好き。

浮き彫り

See the Pen GyrBjJ by Kuzlog (@Kuzlog) on CodePen.

エンボスにちょいと大きめのフワッとした影を付けるとこんな感じに浮き上がります。好き。

レタープレス

See the Pen YYNjGm by Kuzlog (@Kuzlog) on CodePen.

エンボスの上下の色を逆にしただけです。けっこう好き。

ブラー（ぼかし）

See the Pen WdRKzZ by Kuzlog (@Kuzlog) on CodePen.

文字を透過して影だけ表示させるテクニック。隠しテキストになるのかなこれ…

縁取り

See the Pen vpgagY by Kuzlog (@Kuzlog) on CodePen.

背景色と文字色を合わせて、後は上下左右に1pxずつズラした影を落とせば縁取り出来ます。

発光

See the Pen vpgaxY by Kuzlog (@Kuzlog) on CodePen.

デカい影を落とすだけでも発光テキストは作れるけど、1pxぼかした影を上下左右に付けると輪郭がいい感じになります。

浮遊

See the Pen dJNjRx by Kuzlog (@Kuzlog) on CodePen.

立体テキストの下に大きめの影を落とせば、文字が浮かび上がってるように見えます。

inset風（内側の影）

See the Pen XVMzqB by Kuzlog (@Kuzlog) on CodePen.

text-shadowはbox-shadowと違ってinsetは使えないので、2つの影を使って擬似的に内側の影を再現するという荒業。仕組み的に「赤い背景+青い文字+内側に影」とかは出来ません。出来たら教えて欲しい。

積み上げ

See the Pen mpRjKP by Kuzlog (@Kuzlog) on CodePen.

立体テキストの応用です。暗い色と明るい色を交互に配置すると、板を積み上げたような感じになります。

ハンバーガー

See the Pen MrpOJE by Kuzlog (@Kuzlog) on CodePen.

これも立体テキストの応用です。美味しそうだけど、なぜ作ったのかは不明。

最後に

このように、ある程度のエフェクトはCSSだけでも実現可能です。デザイン性はIllustrator等で作った文字（画像）には当然敵いませんが、画像と違って…

• テキストや色の変更が容易
• コピーが可能
• マウスホバー等のエフェクトとして使うことも可能

…などのメリットもあるので、Webサイトやブログにちょっとしたアクセントを添えたい時は、積極的に使ってOKだと思います。