ウェブページのキービジュアルに文字を載せていたが、文字の視認性が悪い
なので文字に影をつける対策を考える
このときCSSのText Shadowsを使ってみることにした
https://drafts.csswg.org/css-text-decor-3/#text-shadow-property
完成イメージ
使い方（例）
text-shadow: 1px 1px 2px blank;
box-shadow [CSS-BACKGROUNDS-3] とほとんど同じ（ただし、spread値とinsetはない）
スペース区切りで値を並べる
- 1番目<長さ>
影の水平オフセットを指定する。正の値は、ボックスの右側にオフセットされた影を描画し、負の値は左側にオフセットされた影を描画する。 - 2番目<長さ>
影の垂直オフセットを指定する。正の値はシャドウを下にオフセットされた影を描画し、負の値はシャドウを上にオフセットされた影を描画する。どんだけ上下にオフセットしてもレイアウトには影響を与えない。 - 3番目<長さ[0、∞]>
ぼかし半径を指定する。負の値は無効。ぼかし値がゼロの場合、シャドウのエッジはシャープになる。それ以外の場合、値が大きいほどシャドウのエッジがぼやける。シャドウブラーについては以下。
https://www.w3.org/TR/css-backgrounds-3/#shadow-shape - <色> 影の色を指定する。色がない場合、デフォルトでcolorプロパティから取得される。
ChromeのDevToolではシャドウエディタが用意されていて、パネルをいじりながら編集することができる
