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

コメント本文(必須) :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ