文字に影をつける
文字に影をつけるCSSはよく使うので、とくに使用頻度の高い3パターンのコードをまとめておきます。
「text-shadow」プロパティの使い方 【 3パターン 】
文字(テキスト)に影をつけるには、「text-shadow」プロパティを使います。
記述のしかたは以下のような順序で記述していきます。
記述のしかた
text-shadow : x軸方向の距離 y軸方向の距離 ぼかし幅の度合い 影の色 ;
x軸方向の距離とy軸方向の距離には、マイナスの数値を指定することも可能。
現在、使用に当たっては、プレフィックスは必要ないみたいですが、IE9以下は未対応とのこと。
以下で、タイポグラフィの表現でよく使う3パターンのコードをまとめておきます。
1. オーソドックスな黒い影
【 完成画像 】
2. オーソソックスな黒い影+ぼかし
【 完成画像 】
3 縁取りをつけたように見せる
【 完成画像 】
【 CSS 】
1
p{
2
2px 2px 3px #366,
3
-2px 2px 3px #366,
4
2px -2px 3px #366,
5
-2px -2px 3px #366;
6
}