文字にドロップシャドウの効果をつける--FirefoxとSafariのCSS対応

最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

　text-shadowプロパティを利用すると、文字に影をつけて表示することができる。これまではSafariが対応しているだけだったが、Firefox 3.1（アルファ版）とOpera 9.5が対応した。

　また、Firefox 3.1（アルファ版）は本連載の「ボックスにドロップシャドウの効果をつける」で紹介したbox-shadowプロパティにも対応したので、それについても紹介したい。

文字に影をつけて表示する

　text-shadowはCSS 2で定義されたプロパティだが、CSS 2.1では削除され、CSS 3のTextで復活している。

　text-shadowプロパティで文字に影をつけて表示するには、次のような形で4つの値を指定する。

text-shadow: ［横方向のオフセット］ ［縦方向のオフセット］ ［ぼかしの半径］ ［影の色］

　たとえば、赤色の文字にグレーの影をつけると次のように表示される。ここでは、縦横のオフセットやぼかしの半径を5ピクセルに設定している。

Firefox 3.1（アルファ版）での表示。Opera 9.5、Safariでも同じように表示される

div{
text-shadow: 5px 5px 5px gray;
color: navy;
font-size: 50px;
font-weight: bold;
font-family: Verdana, Helvetica, sans-serif;
}

Hello, world.

※ブラウザで表示を確認する

　影をつけることで文字を読みやすくすることもできる。背景と文字のコントラストが弱い場合や、背景画像に文字を重ねる場合などに利用すると効果的だ。

　たとえば、次のサンプルは背景画像の上に白色の文字を重ねて表示したものだが、影のあるなしによって文字の読みやすさが違ってくる。

Firefox 3.1（アルファ版）での表示。Opera 9.5、Safariでも同じように表示される

div#shadow{
text-shadow: 5px 5px 10px black;
}

div{
color: white;
font-size: 50px;
font-weight: bold;
font-family: Verdana, Helvetica, sans-serif;
background-image: url(yellow.png);
width: 400px;
height: 100px;
padding: 30px 0;
text-align: center;
}

Hello, world.

Hello, world.

※ブラウザで表示を確認する