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

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

イメージ

来週は夏休みをとり、相模湖でテント宿泊予定の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;
}

まとめ

いかがでしょうか、コード量は若干増えてますがこんな手法もありかなと。
IE6~7対応で、影が一色andぼかしがない場合に思い出していただければ…。
なかなかないレアケースかもしれませんが。

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

この記事を読んだ人にオススメ