CSS text-shadowメモ

CSSのtext-shadowメモ

仕様（簡単に）

text-shadow: offset_x | offset_y | blur | color;

• offset_x
  • 左右方向の影の位置。0だとテキストと重なる。このときでも、blurが大きければ、ぼかしが見える。正なら右へずれる。
• offset_y
  • 上下方向の影の位置。上と同様。正なら下へずれる。
• blur
  • ぼかしの大きさ。0だとぼかしなし。
• color
  • 影の色。

colorとblurは省略できるが、一貫性の確保の観点から省略しないほうがよさそう。（特にcolor）

複数指定可能

なお、これらの指定は、カンマ区切りで複数指定できる。つまり、影を複数つけられるということ。

text-shadow: 1px 3px 5px rgba(0,0,0,0.5), 1px 3px 5px rgba(0,200,100,0.5);

こんな感じになる。

縁取りも可能

また、ぼかしを0にして、上下左右1pxずつ指定すれば、文字の縁取りもできる。

color: white;
text-shadow: -1px 0px rgba(255,0,255,1), 1px 0px rgba(255,0,255,1), 0px -1px rgba(255,0,255,1), 0px 1px rgba(255,0,255,1);

縁取り文字になる。

下線引きは少し怪しい

ぼかしとオフセットを上手く使えば下線も引けるんじゃないかと思った。

text-shadow: 0px 4px 10px rgba(220,100,10,1);

こんな具合。 文字自体の密度もあるので、あまり適していない気がする。

参考

text-shadow - CSS: カスケーディングスタイルシート | MDN

以上です。