よく背景画像を使ってボックスにドロップシャドウをつけるのを見かけますが、divで作ったボックスにもCSSでドロップシャドウをつけられます。
といっても対応しているブラウザが少ないのであくまで暫定的なものですが・・・
当サイトでも使用しているので確認してみてください。トップページで使用しているのがわかりやすいと思います。
私が見た中ではSafari4くらいでしか表示されませんでした。
実際の設定
-webkit-box-shadow: 3px 3px 3px #cccccc;
となります。
最初の3pxでx軸,3pxでy軸,3pxでぼかしの範囲、最後の#CCCCCCでシャドウの色の指定を行っています。
x,y軸は-の値も設定できるので、工夫次第で面白い表現が出来るかもしれません。
- サイト
