【CSS3】テキストに影を付ける(text-shadow)
テキストに影を付ける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以降
コメントを残す