どや!?css3のドロップシャドウ(box-shadow)に関する情報を掻き集めた

08 8月

  • このエントリーをはてなブックマークに追加

css3のドロップシャドウ(box-shadow)に関する情報を掻き集めた

CSS3を使えば画像を使わずにドロップシャドウを表現する事が出来ます。
今更ですが、情報を集めたので記事にします。
 

ドロップシャドウを表現する

今まで画像でドロップシャドウを表現していた部分を box-shadow を使用する事で簡単にドロップシャドウを表現出来てしまうプロパティです。
CSS3 はまだ仕様が確定しているわけではないので、最近のモダンブラウザは独自実装という形で実装しています。そのため、Firefox なら -moz- の、Safari や Google Chrome なら -webkit- のプレフィクスを用いて指定します。

ドロップシャドウを表現する

<div class="demo">
	ドロップシャドウを表現する
</div>
.demo{
	-moz-box-shadow: 5px 5px 10px #aaaaaa;	/* firefox */
	-webkit-box-shadow: 5px 5px 10px #aaaaaa;/* Safari,Chrome */
	box-shadow: 5px 5px 10px #aaaaaa;		/* CSS3 */
	margin: 20px;
	padding: 10px;
	width: 300px;
	color: #222222;
	background: #f2f2f2;
	}

 

IEでもドロップシャドウを表現したい場合

①filterプロパティのBlur()を使う
filterプロパティのBlur()は、要素をぼかす際に使用するものです。
このぼかした要素の上に、一枚div要素を加えて、ドロップシャドウのように見せる。
記述は面倒だが、1番自然に見える。

<div class="IE_filter">
	<div class="Frame">
		filterプロパティのBlur()を使う
	</div>
</div>
div.IE_filter{
	-moz-box-shadow: 5px 5px 10px #aaaaaa;	/* firefox */
	-webkit-box-shadow: 5px 5px 10px #aaaaaa;/* Safari,Chrome */
	box-shadow: 5px 5px 10px #aaaaaa;		/* CSS3 */
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.3');
	}
	div.IE_filter div.Frame{
		margin: -10px;
		/* ネガティブマージンで位置を調整 */
		position: relative;
		/* filterを使うと、中の要素まで効果がかかってしまう為、これで回避 */
		}

 

■PixelRadius=ぼかしの距離
 ・・・ 1~100の範囲で指定(初期値は2)
■MakeShadow=影表示にするかどうか
 ・・・ 1(true)または0(false)で指定(初期値は0)
■ShadowOpacity=影の透明度
 ・・・ 0(透明)~1(不透明)の範囲で指定(初期値は0.75)

 
 
②filterプロパティのShadow()を使う
filterプロパティのShadow()は、ドロップシャドウをかけるもの。
だが、ふんわりしたドロップシャドウをかけることができない。

IEでもドロップシャドウを表現したい場合

<div class="IE_filter2">
	filterプロパティのShadow()を使う
</div>
.IE_filter2{
	-moz-box-shadow: 5px 5px 10px #aaaaaa;	/* firefox */
	-webkit-box-shadow: 5px 5px 10px #aaaaaa;/* Safari,Chrome */
	box-shadow: 5px 5px 10px #aaaaaa;		/* Opera */
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=10px);	/* IE */
	}

 
 
③IEの独自拡張プロパティbehavior(ビヘイビア)を使う
ie-css3.htc をcssから読み込むだけで良い。
角丸(border-radius)、box-shadow(ボックスのシャドウ)、text-shadow(テキストのシャドウ)をサポートしている。
ただ、ドロップシャドウの色を変更できない。

IEでもドロップシャドウを表現したい場合

<div class="IE_behavior">
	ie-css3.htcでIEでもドロップシャドウを表現
</div>
.IE_behavior{
	-moz-border-radius: 15px;	/* firefox */
	border-radius: 15px;		/* CSS3 */

	-moz-box-shadow: 5px 5px 10px #aaaaaa; /* Firefox */
	-webkit-box-shadow: 5px 5px 10px #aaaaaa; /* Safari,Chrome */
	box-shadow: 5px 5px 10px #aaaaaa; /* CSS3 */

	behavior: url(ie-css3.htc); /* IE */
	}

 

感想

これだけ簡単にできるのはとてもありがたい。
だが、やはりIEが・・・。
filterプロパティのBlur()を使うやり方が、一番綺麗に見えそうです。
ただ、PCに負担がかかるため多様はできませんね。
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">

トラックバックURL

この記事のトラックバック URL