TOP  >  CSS・スタイルシートTIPS  >  CSS3でボックスにドロップシャドウ

2011年02月04日 00:05

CSS3でボックスにドロップシャドウ

CSS3を使ってボックスにドロップシャドウをかけたい場合、
基本的には以下のような記述になります。
W3C CSS3準拠のwebkit系(Safari, Chrome)とMozzilea系(Firefox)に分けての記述です。

Safari3など用のwebkit(W3C CSS3準拠)に対する記述
-webkit-box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;
FirefoxなどMozilla系ブラウザに対する記述
-moz-box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;
CSS3の記述
box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;

表示例は次のようになります。

HTML5&CSS3辞典



縦方向と横方向にドロップシャドウをかける

縦横ぼかし5pxを指定したドロップシャドウ
5pxのドロップシャドウを指定したボックスです。

-webkit-box-shadow: 5px 5px 5px #CCC;
-moz-box-shadow: 5px 5px 5px #CCC;
box-shadow: 5px 5px 5px #CCC;

縦方向、横方向1方向ににドロップシャドウをかける

横方向0、縦方向2px、ぼかし2pxを指定したドロップシャドウ
2pxのドロップシャドウを指定したボックスです。

-webkit-box-shadow: 0 2px 2px #CCC;
-moz-box-shadow: 0 2px 2px #CCC;
box-shadow: 0 2px 2px #CCC;

横方向2px、縦方向0、ぼかし2pxを指定したドロップシャドウ
2pxのドロップシャドウを指定したボックスです。

-webkit-box-shadow: 2px 0 2px #CCC;
-moz-box-shadow: 2px 0 2px #CCC;
box-shadow: 2px 0 2px #CCC;


基本的な指定では上記のような見え方になります。
1方向だけ指定してもぼかしの分はみ出すので、
CSSをうまく使って指定する必要があります。

IEでも対応させたい場合はCSS3PIE(PIE.htc)を使って対応させるか、
CSS3PIE(PIE.htc)が効かないと思ったら
shadow filterなどを使用すれば対応できます。

すぐに使えるスタイルシート標準テクニック
iPhoneアプリケーション開発ガイド

TOP  >  CSS・スタイルシートTIPS  >  CSS3でボックスにドロップシャドウ




正当なCSSです!