文字に影をつけるCSSはよく使うので、とくに使用頻度の高い3パターンのコードをまとめておきます。
「text-shadow」プロパティの使い方 【 3パターン 】
文字(テキスト)に影をつけるには、「text-shadow」プロパティを使います。
記述のしかたは以下のような順序で記述していきます。
記述のしかた
text-shadow : x軸方向の距離 y軸方向の距離 ぼかし幅の度合い 影の色 ;
x軸方向の距離とy軸方向の距離には、マイナスの数値を指定することも可能。
現在、使用に当たっては、プレフィックスは必要ないみたいですが、IE9以下は未対応とのこと。
以下で、タイポグラフィの表現でよく使う3パターンのコードをまとめておきます。
1. オーソドックスな黒い影
【 完成画像 】
【 CSS 】
1
p{
2
text-shadow : 2px 2px 0px #366 ;
3
}
2. オーソドックスな黒い影＋ぼかし
【 完成画像 】
【 CSS 】
1
p{
2
text-shadow : 2px 2px 2px #366 ;
3
}
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
}
関連記事
文字をカスタマイズする際に参考になる記事
PICK UP
TIPS記事セレクション
Intense blog, it’s not often that I will wantnote your good page. You complete a number of good points there.