デザインやcss、jsなど、ウェブ関係を中心に様々なtipsを紹介します。

cssでドロップシャドウを実現する(IE、firefox、Google Chrome対応)


cssでドロップシャドウを実現する(IE、firefox、Google Chrome対応)

画像を使わずにcssでドロップシャドウを実現。技術として可能なのは知ってたけど、「photoshopで加工するほうが慣れてるし早いしいいあー」ってついつい後回しにしてやったことなかったです。でもやっぱできたほうがなにかと便利だということで、やってみたのでここにまとめときます。・・・久しぶりのエントリーです。すみません。


css3を使ってドロップシャドウを実現する


まずはcss3を活用した方法。FirefoxやGoogle Chrome、safariなどは、
独自仕様という形でcss3の機能の一部を使えます。
基本はbox-shadowというタグで、

box-shadow: 横方向のずれ 下方向のずれ ぼかし具合 シャドウの色

で記載します。
例えば、横と下方向にそれぞれ1pxずつずれ、ぼかし具合が5px程度でシャドウの色がグレー(#aaaぐらい)
ならば

box-shadow: 1px 1px 5px #aaa;

と表記します。

これだとソースはシンプルでわかりやすいですが、現時点ではブラウザ依存が大きいです。
言うまでもなくIEは対応してません。

ほんとにもう。。。

IE9からはcss3対応するらしいですが、悩ましい存在です、IE。

デモを見る!

html

<div class="shadow" style="margin:30px 0; width:500px; background-color:#f7f7f7;">
	<p style="margin:10px;"><b>このdiv要素はcss3を用いてドロップシャドウを実現しています。</b><br />IEはcss3に対応していないため、ドロップシャドウは見えません。</p>
</div>

css

.shadow {
	box-shadow: 2px 2px 10px #000; /*CSS3*/
	-moz-box-shadow: 2px 2px 10px #000; /* Firefox用*/
	-webkit-box-shadow: 2px 2px 10px #000; /* Google Chrome, Safari用*/
	}

デモを見る!

IEでもcssを用いたドロップシャドウを実現する

Internet Exolorer

IEの場合は、css3とか関係ないIE独自の仕様を使います。
filterプロパティのShadow()を使う方法や、IEの独自拡張プロパティbehavior(ビヘイビア)を
使う方法などがありましたが、一番簡単そうかつ仕上がりが良さそうだったので、
ここではfilterプロパティの Blur()を利用します。

これは、要素をぼかす際に使用するものです。このぼかした要素の上に、
一枚div要素を加えて、ドロップシャドウのように見せます。
css3だけを使う場合よりdivが入れ子になってしまって不恰好ですし、
記述はちょっと面倒ですが。。。

デモを見る!

html

<div class="ie_shadow" style="margin:30px 0; width:500px; background-color:#f7f7f7;">
	<div class="ie_wrap">
		<p style="margin:10px;"><b>IEでもドロップシャドウを実現するためには、<br />filterプロパティのBlur()を利用します。</b><br />IEでもドロップシャドウが表現されています。</p>
	</div>
</div>

css

.ie_shadow {
	box-shadow: 2px 2px 10px #000; /* CSS3 */
	-moz-box-shadow: 2px 2px 10px #000; /* Firefox用*/
	-webkit-box-shadow: 2px 2px 10px #000; /* Google Chrome, Safari用*/
	background-color:#f7f7f7;
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2', MakeShadow='true', ShadowOpacity='0.5');
	}
.ie_shadow .ie_wrap {
	background-color:#f7f7f7;
	position: relative; /* filterを使うと、中の要素まで効果がかかってしまう為、これで回避*/
	width:100%;
	}
.ie_shadow .ie_img {
	background-color:#fff;
	position: relative; /* filterを使うと、中の要素まで効果がかかってしまう為、これで回避*/
	}

デモを見る!

どうしてもIEでも対応させたい・・・っ!って場合はともかくとして、
実用面で考えると、やっぱりcss3対応がいいですね。
シンプルで簡単。さらに画像より管理が楽ですし、表現の幅も広がりそうだしでメリットは多い気がします。

一方、IEでもとなると、やっぱり画像使うのが手堅い気が。
というか苦労してcss対応でやらなくても。。。というのが正直な感想です。

あくまで個人的な意見ですが
別に全ブラウザで同じように見えなくてもいいと思うんです。
未対応ブラウザだけ、枠線で見せてもいいじゃないですか。

・・・そうも言ってられないイロイロな事情はあるのでしょうけどね。

この記事に関連する記事:

  1. CSSハック集~IE、Chrome、Firefox、Safari向け~
  2. 「手軽で便利」なjQueryを活用した小ワザ5つ

スポンサードリンク

“cssでドロップシャドウを実現する(IE、firefox、Google Chrome対応)” への4件のコメント

  1. sola1101 より:

    Web Tips Blog新着記事 ⇒ cssでドロップシャドウを実現する(IE、firefox、Google Chrome対応) http://twd.ac/i0ILOW

  2. whtmlnews より:

    cssでドロップシャドウを実現する(IE、firefox、Google Chrome対応) | Web Tips Blog http://t.co/DcasnDHZ

  3. 4thpride_ryu より:

    cssでドロップシャドウを実現する(IE、firefox、Google Chrome対応) http://t.co/Bq3B0p9N @さんから

  4. megie_mugi より:

    cssでドロップシャドウを実現する(IE、firefox、Google Chrome対応) http://t.co/FIIk8jJH @さんから

コメントをどうぞ