text-shadow使ってますか

文字に影をつけるためのCSSプロパティ。
以前は使ってみても影が付いてるのかどうかはっきりしないくらい効果が薄かったので編み出した方法なのですが久しぶりに使ってみたらはっきりくっきり出ている。記憶違いかな。

See the Pen GRJogEp by sphenisc (@sphenisc) on CodePen.

これはどういう時に使うかと言うと写真背景の上に白い文字を表示しなければいけないような状況で読みにくさを緩和するためのものです。 text-shadow を12回重ねがけして効果を増強しています。

バリエーション

SCSSで影の色と濃さを調整できるようにしたもの

See the Pen rNVxazr by sphenisc (@sphenisc) on CodePen.

text-shadow: 2px 2px 2px rgba($sha, $opa)
パラメータの意味は　影のX座標をいくつずらすか／Y座標を～以下略／ぼかす範囲／影の色