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