CSS3のbox-shadowプロパティではなくCSS2で実装するbox-shadowみたいなやつ

HTML&CSS

ishida

2011.08.05

イメージ

来週は夏休みをとり、相模湖でテント宿泊予定のishidaです。
たまには家族サービスしないとね。

今回はbox-shadowについてのTipsです。

CSS3のおかげで影の表現は、かなーり楽になりました。
でもでも、IE6～7が対象ブラウザだったりする案件まだ多いですよね。

そんな時は、CSS3のbox-shadowプロパティを使わないで実装してみるべし。
※影のぼかしについてはなしという前提でお願いします。

CSS3で実装するbox-shadow

例えば平面に近い影のような場合は、こんな感じです。

CSS3で実装するbox-shadow

XHTML

<div id="boxA">
CSS3で実装するbox-shadow
</div>

CSS

#boxA {
	height: 200px;
	background-color: #FFF000;
	-webkit-box-shadow: 3px 3px 0 #000000;
	-moz-box-shadow: 3px 3px 0 #000000;
	box-shadow: 3px 3px 0 #000000;
}

これぐらいだったら、CSS3じゃなくてCSS2でも実装できます。

CSS2で実装するbox-shadowみたいなやつ

見た目に違いはないかなと。

CSS2で実装するbox-shadowみたいなやつ

XHTML

<div id="boxBshadow">
<div id="boxB">
CSS2で実装するbox-shadowみたいなやつ
</div>
</div>

CSS

#boxBshadow {
	margin: 3px 0 0 3px; 
	height: 200px;
	background-color: #000000;
}
#boxB {
	position: relative;
	top: -3px;
	left: -3px;
	height: 200px;
	background-color: #FFF000;
}