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.
- $sha: #fff; が影の色を設定する項目で
- $opa: 0.4; で影の濃さを調整できます。
text-shadow: 2px 2px 2px rgba($sha, $opa)
パラメータの意味は 影のX座標をいくつずらすか／Y座標を～以下略／ぼかす範囲／影の色
- 影を強く、濃くする → 同じ範囲の影を十数個重ねる
- くっきりさせる → 影のぼかす範囲(3つ目のパラメータ)を狭くする(0.4em → 0.1em等)
- ぼやけさせる → 影のXとY座標をバラけさせたりランダムにする