CSS3 text-shadowで文字に影を付けて文字を見やすくする。

CSS3

今更って感じですが、今日はCSS3のtext-shadowについてサクッと

CSS3 text-shadow

text-shadow:水平方向の距離 垂直方向の距離 ボカシの半径 色;

スペース区切りで４つのパラメータを指定します。
距離にはマイナス値が指定可能。

  1. 水平方向の距離
  2. 垂直方向の距離
  3. ボカシの半径
  4. 色
　
text-shadow: 0px 0px 3px #fff;
　

 

１つだけの指定では足りない場合は、カンマで区切って複数指定できます。
text-shadow:水平方向の距離1 垂直方向の距離1 ボカシの半径1 色1, 水平方向の距離2 垂直方向の距離2 ボカシの半径2 色2, ;

　
text-shadow: 0px 0px 1px #fff, 0px 0px 3px #fff,  0px 0px 5px #fff;
　

 

影を付けない場合

写真やパターンを背景にすると文字が見づらくなります。

ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字。ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字。

 

影を付けた場合

影を付けるだけで、断然見やすくなります。

ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字。ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字。

まぁ、写真の上に文字を配置するな！って話ですが（笑）

 

関連記事