ボックスにドロップシャドウの効果をつける--Safari 3のCSS対応

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

背景色を透明にした場合

　box-shadowで表示する影は、CSS 3の草案ではボックスの外側に描画するものと定義されている。そのため、ボックスの背景色を透明にした場合、影の表示は以下の図1の【A】のようにはならず、【B】のようになる。

図1

　実際にボックスを透明にして表示を確認すると、次のようになる。透明にしたボックスはページの背景と同じ白色で表示され、ボックス内には影が表示されないことがわかる。なお、ここではボックスのまわりをオレンジ色の罫線で囲んで表示した。

ボックスの背景を透明にして表示

div{
border: solid 4px #ffaa00;
background-color: transparent;
-webkit-box-shadow: 20px 20px 20px gray;
}

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

ボックスを重ねて表示した場合

　box-shadowで表示する影は、CSS 3の草案では各ボックスのすぐ後ろに描画するものと定義されている。そのため、影をつけたボックスを重ねても、【A】のように各ボックスの影が統合されることはなく、【B】のように表示される（図2）。

図2

　たとえば、影をつけたオレンジ色のボックスを黄色のボックスの上に重ねると、次のような表示になる。

ボックスとボックスを重ねて表示

div#text01{
background-color: #ffff00;
-webkit-box-shadow: 20px 20px 20px #224466;
margin-left: 150px;
}

div#text02{
background-color: #ffaa00;
-webkit-box-shadow: 20px 20px 20px gray;
margin-top: -50px;
}

HELLO

こんにちは

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