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

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

値を0に設定した場合

 ぼかしの半径の値を「0」に設定すると、ぼかしのない四角い影を表示することができる。

ぼかしの半径を「0」にしたもの ぼかしの半径を「0」にしたもの
div{
background-color: #ffaa00;
-webkit-box-shadow: 10px 10px 0 gray;
}
ブラウザで表示を確認する

 また、オフセットを「0」にすると、ボックスのまわりに影を表示することが可能だ。

オフセットの値を「0」にしたもの オフセットの値を「0」にしたもの
div{
background-color: #ffaa00;
-webkit-box-shadow: 0 0 50px gray;
}
ブラウザで表示を確認する

 オフセットにはマイナス値を指定することが認められているので、ボックスの左上に影を表示することもできる。なお、ぼかしの半径にマイナス値を指定することは認められていない。

オフセットにマイナスの値を指定したもの オフセットにマイナスの値を指定したもの
div{
background-color: #ffaa00;
-webkit-box-shadow: -10px -10px 10px gray;
}
ブラウザで表示を確認する
  • コメント(1件)
#1 Cee   2008-05-01 17:34:23
重ねた時のSample良いですね。ゆくゆくは下の色を考慮してくれたらいいなぁ。。。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]