CSS3のtext-shadowを使ってテキストを装飾してみる｜3Dテキストやエンボス効果などなど

CSS3の「text-shadow」を使ったデザインの例を作りました。 text-shadowを使いこなせば、テキストに対して色々なエフェクトをかけることが可能です。もちろんPhotoshopやIllustratorを用いて作られたものには敵いませんが、少しコードを書き換えるだけで色や文章を変更出来るというメリットがあります。また、画像と違って閲覧者がコピー出来るという利点もあります。

基本の基本、ドロップシャドウ

See the Pen XbpbPM by Setoda Kouki (@LeoTiger) on CodePen.

これが基本です。

3D表現その1

See the Pen Xbpbrm by Setoda Kouki (@LeoTiger) on CodePen.

シャドウを下方向に1pxずつ動かしていくつか配置すると、立体的なテキストを作成できます。

3D表現その2

See the Pen pJRJEz by Setoda Kouki (@LeoTiger) on CodePen.

今度は右下に1pxずつ配置。

なんかポップな雰囲気

See the Pen Nqdqdm by Setoda Kouki (@LeoTiger) on CodePen.

なんかよく分かりません。

発光テキスト

See the Pen BNpNLG by Setoda Kouki (@LeoTiger) on CodePen.

ぼかし範囲を広げた白いシャドウを配置。

ブラー効果（ぼかし）

See the Pen bdgdNQ by Setoda Kouki (@LeoTiger) on CodePen.

テキスト自体の色を「color: transparent;」で透過し、シャドウのみを表示させています。

エンボス

See the Pen JdEdYE by Setoda Kouki (@LeoTiger) on CodePen.

浮き出たようなデザイン。

レタープレス

See the Pen rVjVxO by Setoda Kouki (@LeoTiger) on CodePen.

さっきの逆です。

縁取り

See the Pen wagaMQ by Setoda Kouki (@LeoTiger) on CodePen.

テキストの色に背景色と同じ値を指定し、シャドウを4方向（左上・右上・右下・左下）に配置すると、縁取りしたような文字が作れます。

縁取り+ドロップシャドウ

See the Pen xGgGJX by Setoda Kouki (@LeoTiger) on CodePen.

縁取りのテクニックにシャドウを追加しただけです。

---

今回紹介したエフェクトと擬似クラスを組み合わせると、マウスを乗せると発光するテキストやクリック時に沈み込むテキスト等を簡単に作成できます。
コード自体は割と単純なので、これを機に色々と試してみてください！