CSSでテキストにドロップシャドウをかける

CSSには、文字にスタイルを与えるためのさまざまな定義が用意されています。その中には、Safariのみが先行して実装しているものもあります。それが「テキストのドロップシャドウ」です。見出しのテキストなどでドロップシャドウを使用したい場合、通常ならばPhotoshopなどで影をつけてグラフィック化しますが、CSSを使えば文字としての属性を損なうことなくドロップシャドウを利用できます。現在のところCSSでドロップシャドウを再現できるのはSafariのみですが、非対応のブラウザでは通常のテキストとして表示されますので、Webサイトの更新作業や修正作業にぜひご活用ください。

1.外部スタイルシートでテキストのドロップシャドウを指定する

テキストのドロップシャドウは、以下のように記述します。

text-shadow: 4px 4px #999999

「text-shadow:」の後の1つめの値で、シャドウを右方向へどれだけずらすかを、2つめの値でシャドウを下方向へどれだけずらすかを指定します。その後で、シャドウの色を指定しています。

実際に外部スタイルシートの中で、テキストのドロップシャドウを指定してみましょう。ここでは、見出しとなるh1要素のテキストにドロップシャドウをかけてみます。

* { font-size:100% ; font-weight:normal }
body { color:#000000 ; background-color:#FFFFFF ; margin-left:10% ; margin-right:10% }
h1 { font-size:500% ; text-shadow: 4px 4px #999999 ;}
p { line-height:1.5em }

表示結果はこのようになります。

CSSで広がる
Webデザインの世界

2.ドロップシャドウにぼかしを加える

ドロップシャドウにぼかしを加えるには、以下のように記述します。

text-shadow: 4px 4px 4px #00FFF

「text-shadow:」の後の1つめの値で、シャドウを右方向へどれだけずらすかを、2つめの値でシャドウを下方向へどれだけずらすかを、そして3つめの値でぼかしの範囲を指定します。その後で、シャドウの色を指定します。

実際に外部スタイルシートの中で、テキストのドロップシャドウを指定してみます。

* { font-size:100% ; font-weight:normal ;}
body { color:#000000 ; background-color:#FFFFFF ; margin-left:10% ; margin-right:10% }
h2 { font-size:500% ; text-shadow: 6px 6px 4px #666666 }
p { line-height:1.5em }

表示結果はこのようになります。