文字にドロップシャドーを付ける

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プロパティに対応していません。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る