CSS3 text-shadowで文字に影を付けて文字を見やすくする。
- 2014/06/10
今更って感じですが、今日はCSS3のtext-shadowについてサクッと
CSS3 text-shadow
text-shadow:水平方向の距離 垂直方向の距離 ボカシの半径 色;
スペース区切りで4つのパラメータを指定します。
距離にはマイナス値が指定可能。
- 水平方向の距離
- 垂直方向の距離
- ボカシの半径
- 色
text-shadow: 0px 0px 3px #fff;
1つだけの指定では足りない場合は、カンマで区切って複数指定できます。
text-shadow:水平方向の距離1 垂直方向の距離1 ボカシの半径1 色1, 水平方向の距離2 垂直方向の距離2 ボカシの半径2 色2, ;
text-shadow: 0px 0px 1px #fff, 0px 0px 3px #fff, 0px 0px 5px #fff;
影を付けない場合
写真やパターンを背景にすると文字が見づらくなります。
ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字。ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字。
影を付けた場合
影を付けるだけで、断然見やすくなります。
ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字。ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字、ここが文字。
まぁ、写真の上に文字を配置するな!って話ですが(笑)