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

エ・ビスコム・テック・ラボ
2008-04-25 17:45:01
  • このエントリーをはてなブックマークに追加
最新特集【一覧】
アドビ、Photoshopの機能追加を含めCreative Cloudをアップデート
システム担当者がより楽しめる「007 スカイフォール」の見方--MI6が遭遇する手痛いピンチは、こうすれば防げた？
Javaエバンジェリストが語る「JavaOne 2012 San Francisco」の見どころ ～築き上げられる『未来のJavaの姿』～

　CSS 3のbox-shadowプロパティを利用すると、ボックスに影をつけて表示することができる。ドロップシャドウと呼ばれる効果で、これまでは画像を使って表現する必要があった。今回は、box-shadowプロパティに対応したSafari 3を利用して、ドロップシャドウの効果を見ていきたい。

ボックスに影をつけて表示する

　box-shadowプロパティはCSS 3の草案「CSS3 Backgrounds and Borders Module」で提案されており、Safari 3では「-webkit-box-shadow」というプロパティ名で利用することができる。

　box-shadowを使ってボックスに影をつけるには、次のような形で4つの値を指定する。指定する値を省略したり、記述順序を変更したりすることは認められていない。

box-shadow: [横方向のオフセット] [縦方向のオフセット] [ぼかしの半径] [影の色]

　たとえば、オレンジ色のボックスにグレーの影をつけると次のように表示される。ここでは、縦横のオフセットやぼかしの半径を10ピクセルに設定した。

Safari 3の表示 Safari 3の表示 
div{
background-color: #ffaa00;
-webkit-box-shadow: 10px 10px 10px gray;
}

こんにちは
※ブラウザで表示を確認する
  • コメント（1件）
#1 Cee   2008-05-01 17:34:23
重ねた時のSample良いですね。ゆくゆくは下の色を考慮してくれたらいいなぁ。。。
  • 新着記事
  • 特集
  • ブログ