スタイルシートで文字に影を付ける

タイトルや記事等の文字に影を付けるには、スタイルシートの text-shadow プロパティを使用する。ここでは下の”サンプル”という文字を元に影を付けていってみる。

影をつける

まずは基本の影の位置指定だ。それぞれ右方向と下方向への移動距離になる。

text-shadow: 3px 6px;

負の値を指定すれば、左方向と上方向になる。

text-shadow: -3px -6px;

影をぼかす

上で指定したように単純に文字をずらして影を付けても、同じ文字が重なって見えるだけで影には見えない。そこで3つ目の値で影をぼかす範囲を指定する。

text-shadow: 3px 6px 5px;

左と上方向にずらすとこうなる。

text-shadow: -3px -6px 5px;

影に色を付ける

上記で指定した数値全体の前か後ろで、影に付ける色を指定できる。ここでは半透明の黒を付けてみた。

text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);

赤を指定するとこうなる。

text-shadow: red 5px 5px 8px;

影を付けない

全体のテキストに影を付けて、特定の文字だけは影を付けないといった場合等、影を付けたくない場合は none を指定する。

text-shadow: none;