My Vector Space

人生は寄り道してなんぼ

文字に影をつける

文字に影をつけるCSSはよく使うので、とくに使用頻度の高い3パターンのコードをまとめておきます。

「text-shadow」プロパティの使い方 【 3パターン 】

文字(テキスト)に影をつけるには、「text-shadow」プロパティを使います。

記述のしかたは以下のような順序で記述していきます。

記述のしかた

text-shadow : x軸方向の距離  y軸方向の距離  ぼかし幅の度合い  影の色  ;

x軸方向の距離とy軸方向の距離には、マイナスの数値を指定することも可能。
現在、使用に当たっては、プレフィックスは必要ないみたいですが、IE9以下は未対応とのこと。

以下で、タイポグラフィの表現でよく使う3パターンのコードをまとめておきます。

1.  オーソドックスな黒い影
【 完成画像 】
shadow-1
 【 CSS
 1
  p{
 2
      text-shadow : 2px  2px  0px  #366 ;
 3
  }
2.  オーソソックスな黒い影+ぼかし
【 完成画像 】
shadow-2
 【 CSS
 1
  p{
 2
      text-shadow : 2px  2px  2px  #366 ;
 3
  }
3  縁取りをつけたように見せる
【 完成画像 】
shadow-4
 【 CSS 】
 1
  p{
 2
    2px  2px  3px  #366,
 3
    -2px  2px  3px  #366,
 4
    2px  -2px  3px  #366,
 5
    -2px  -2px  3px  #366;
 6
  }

 

PAGE TOP