text-shadowで文字に明るい影を付けると輝いて見える

スタイルシートの text-shadow を使用することで、文字に影を付けることができます。

目次?

黒い影

CSS : 

結果 : 

明るい影

CSS : 

結果 : 

CSS：text-shadowを使用し、文字に影や縁取りをする | raining
http://raining.bear-life.com/css/text-shadow%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%80%81%E6%96%87%E5%AD%97%E3%81%AB%E5%BD%B1%E3%82%84%E7%B8%81%E5%8F%96%E3%82%8A%E3%82%92%E3%81%99%E3%82%8B

黒い影

例えば、次のように記載すると文字の右下に黒い影を付けることができます。

CSS : 

text-shadow: 1px 1px 1px #000000;

結果 : 

　テスト用の文字列

明るい影

逆に、暗い背景のページで明るい文字に明るい影を付けると次のようになります。

CSS : 

text-shadow: 0px 0px 8px #ffffff;

結果 : 

　テスト用の文字列

文字が輝いて見えるようになりました。

但し、上の例だと少しわかりづらいので、同じ text-shadow の CSS をもう少し広範囲に適用してみました。

text-shadow: 0px 0px 8px #ffffff; を広範囲に適用

text-shadow で効果を付けることで、今までは画像を使うことでしか表現できなかったこともテキストデータで表現できるようになります。