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

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