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

エ・ビスコム・テック・ラボ
2008/04/25 17:45

今回はSafari 3でCSS 3のbox-shadowプロパティを検証してみよう。

　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;
	}

<div>こんにちは</div>
※ブラウザで表示を確認する
  • コメント（1件）

#1 Cee  - 2008/05/01 17:34

重ねた時のSample良いですね。ゆくゆくは下の色を考慮してくれたらいいなぁ。。。
» 不適切なコメントを報告する
記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
セキュリティ Internet Explorer Microsoft OS Mac OS X WebKit Flash Windows 7 Chrome 仮想化 アプリケーション linux iPod touch CSS ソフトウェア開発 Opera HTML 開発環境 Windows XP Firefox 3 Ajax Mozilla Safari 脆弱性 RIA インストール クラウド java javascript オープンソース Windows Firefox マイクロソフト Webデザイン Webサービス Database google Tips ブラウザ プログラミング言語 リファレンス データベース Off Topic 小技 Apple iPhone UI iPhone 3G php Windows Vista
  • 話題のタグを見る »