Tweet

Pocket

テキストに影を付ける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以降