【CSS】text-shadowで豪華な3D文字をつくってみる

こんにちは。
今回はCSSのプロパティtext-shadowに関するTipsです。

text-shadowとは?

text-shadowプロパティは、テキストに影をつける際に使用します。
引用:text-shadow-CSS3リファレンス

とそのままです。

使い方

p.p1 { text-shadow: 1px 1px 3px #000; }

text-shadowの一つ目の要素に、水平方向の影のオフセットを、二つ目に垂直方向、三つ目がボカシ半径、そして最後に色。となっています。

実はtext-shadowは上記の指定を1セットとしてカンマで区切り、複数の影を指定することが可能です。

例)たくさん細かく設定して3D文字を作ってみる

p.p2 {
  text-shadow: 0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  0 6px 1px rgba(0,0,0,.1),
  0 0 5px rgba(0,0,0,.1),
  0 1px 3px rgba(0,0,0,.3),
  0 3px 5px rgba(0,0,0,.2),
  0 5px 10px rgba(0,0,0,.25),
  0 10px 10px rgba(0,0,0,.2),
  0 20px 20px rgba(0,0,0,.15);
}

とたくさん付け加えます。ちなみにrgbaは色指定の際、RGBとALPHA(透明度)を指定する方法です。

実行例です。上から通常のテキスト、1つtext-shadowを指定したもの、そして例題のCSSを適用したものです。

See the Pen ByzQGE by Tsukasa Nagata (@nt-uni) on CodePen.0

まとめ

いかがでしたか?
意外と影って難しく、使い方しだいでは一昔のWebページのようになりがちです。細かく調整できて垢抜ける部分だと思うので、是非色々なパターン試してみくださいね!

フォローして続編をチェック

@universionsをフォロー