My Vector Space

  人生は寄り道してなんぼ

テキストに色々なパターンの影をつける方法 「text-shadow」プロパティ

文字(テキスト)に影をつけるには、text-shadowプロパティを使う。
記述のしかたは、text-shadow{x軸,y軸,ぼかしの度合い,影の色}を指定していきます。

使用頻度の高い3パターンを例にしてみます。

 

 

オーソソックスな黒い影
【 完成画像 】

     shadow-1

 【 CSS
 1
  p{
 2
      text-shadow : 2px  2px  0px  #366 ;
 3
  }

 

 

オーソソックスな黒い影+ぼかし
【 完成画像 】

     shadow-2

 【 CSS
 1
  p{
 2
      text-shadow : 2px  2px  2px  #366 ;
 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