さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS3】テキストに影を付ける(text-shadow)

Pocket
LINEで送る

テキストに影を付けるCSS3、「text-shadow」をご紹介します。

【使用例】

.shadow1 {
  font-size:30px;
  color:FFFFFF;
  text-shadow:0em 0em 1em #483D8B;
  }
  
.shadow2 {
  font-size:30px;
  color:rgba(255,0,0,1);
  text-shadow:5px 5px 5px rgba(0,0,0,0.5);
  }

.shadow3 {
  font-size:20px;
  text-shadow:3px 6px 5px #0000FF, -3px -6px 5px #FF0000;
  }

[shadow1]・・・影の部分を大きめに指定したエフェクト的な表現。
[shadow2]・・・文字の影を落とした例です。文字と同じ形を元の文字から若干ずらして配置し、若干ぼかしています。
[shadow3]・・・一つの文字に対して複数の影を指定しています。影の色と位置は任意に指定できますので、複数の影を付けることができます。

【書式】

text-shadow:[X軸オフセット] [Y軸オフセット] [ぼかしの範囲] [色]

ぼかしの範囲は値を大きくするほど、ぼかしの具合が大きくなります。X軸オフセット、Y軸オフセット、ぼかしの範囲ともにpx、emでの指定が可能です。色については色名、RGB、RGBに透明度を加えたRGBAでの指定が可能です。

【対応ブラウザ】
FireFox3.5以降、Opera10.6以降、Safari4以降、Chrome3以降

カテゴリー:HP制作, css

コメントを残す

コメント内容