ボックスにドロップシャドウの効果をつける--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にログインしてコメントする

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