テキストに影をつける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拍手お返事
Comment