テキストに影をつけるCSS3プロパティ「text-shadow」

テキストに影をつけるCSS3プロパティ「text-shadow」

CSS3のテキストに影をつけるtext-shadowプロパティの使い方メモです。

sample

以下のサンプルにtext-shadowを適用していきます。

sample
.sample {
background: #eee;
color: #666;
font-family: 'Changa One', cursive;
font-size: 50px;
}

sample01

以下のように指定します。
text-shadow: (右方向のずれ) (下方向のずれ) (ぼかし具合) (影の色);

sample
.sample01 {
text-shadow: 5px 5px 1px #333;
}

sample02

,(コンマ)で区切って、複数指定することもできます。

sample
.sample02 {
text-shadow:
5px 5px 1px #333,
-5px -5px 1px #999;
}

以下は こちら のサンプルの色を変えたものです。

sample03

sample
.sample03 {
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

sample04

sample
.sample04 {
text-shadow:
-1px -1px 1px rgba(0, 0, 0, 0.5),
1px 1px 1px rgba(255, 255, 255, 0.5);
}

sample05

sample
.sample05 {
text-shadow:
1px 1px 1px rgba(0, 0, 0, 0.5),
-1px -1px 1px rgba(255, 255, 255, 0.5);
}

sample06

sample
.sample06 {
text-shadow:
3px 3px 0px #999,
6px 6px 0px #000;
}

sample07

sample
.sample07 {
color: #eee;
text-shadow:
-1px -1px 0px #666,
1px -1px 0px #666,
1px 1px 0px #666,
-1px 1px 0px #666;
}

参考サイト

css3のtext-shadowによるテキスト装飾のサンプル集 - かちびと.net

下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事