文字にドロップシャドーを付ける
CSS3のtext-shadowプロパティを使用すると、
文字にドロップシャドー(影)の効果を付けることができます。
<p class="kage">文字に影がつきます。</p>
.kage {
text-shadow: 2px 2px 2px #888;
}
文字に影がつきます。
指定する値は順番に横方向からの距離、縦方向からの距離、
ぼかしの半径、影の色、と指定していきます。
.kage2 {
text-shadow: 5px 0px 0px #800000;
font-size:20px;
color:#FF0000;
font-weight: bold;
}
.kage3 {
text-shadow: 0px -4px 0px #999;
font-size:20px;
color;#000080;
font-weight: bold;
}
.kage4 {
text-shadow: 1px 1px 30px #000080;
font-size:20px;
}
文字に影がつきます。
文字に影がつきます。
文字に影がつきます。
※なおIEではtext-shadowプロパティに対応していません。
