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

エ・ビスコム・テック・ラボ
2008-04-25 17:45:01
  • このエントリーをはてなブックマークに追加

背景色を透明にした場合

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

図1 図1

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

ボックスの背景を透明にして表示 ボックスの背景を透明にして表示
div{
border: solid 4px #ffaa00;
background-color: transparent;
-webkit-box-shadow: 20px 20px 20px gray;
}
ブラウザで表示を確認する

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

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

図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
こんにちは
ブラウザで表示を確認する
  • コメント(1件)
#1 Cee   2008-05-01 17:34:23
重ねた時のSample良いですね。ゆくゆくは下の色を考慮してくれたらいいなぁ。。。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]