第46回 
CSS3をIEの独自拡張で再現する【その2】テーブルレイアウトを卒業しよう

CSS3をIEの独自拡張で再現する【その2】

前回に引き続き、IEの独自拡張でCSS3を再現する方法をご紹介します。

box-shadowプロパティ

box-shadowプロパティはCSSだけでドロップシャドウを再現できるプロパティです。

これも前回のopacityをIEのfilterで解決したのと同様に、filterを使います。

box-shadowは、最新のOpera(Opera 10.50以降)ではそのまま使えますが、FirefoxやSafari、Chromeではまだベンダープリフィックスが必要です。

また、現在box-shadowはCSS3の草案から一度削除されています。(多分また復活します。)

<div id="box">
かげをつけたい。かげをつけたい。かげをつけたい。
</div>
#box {
-moz-box-shadow: 2px 2px 3px #ccc; /* for Firefox(Mozilla) */
-webkit-box-shadow: 2px 2px 3px #ccc; /* for Safari,Chrome(WebKit) */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#ccc', Direction=140,
Strength=2); /* for IE */ }

コードをみるとわかりますが、box-shadowとfilterでは設定項目がちがいます。ですので、全く同じ見た目にするための微調整のはメンドクサイです。(上のコードは影はちゃんとでますが、大きさや角度はズレていると思います。)

text-shadowプロパティ

その名前の通り、文字に影を付けられるプロパティです。

参考:第10回 CSS3はここがすごい【プロパティ編2】

これは、jQueryのプラグインで解決できます。

Text-shadow in IE with jQuery

jQueryの使い方はこの辺をご参考に。

参考:第41回 jQueryの基本のキ【その1】

参考:第42回 jQueryの基本のキ【その2】

<script type="text/javascript" src="./scripts/jQuery.js"></script>
<script type="text/javascript" src="./scripts/jquery.textshadow.js"></script>
$(document).ready(function(){
$(".addTextShadow").textShadow();
});
<p class="addTextShadow">
もじにかげをつけたい。もじにかげをつけたい。
</p>
.addTextShadow{
text-shadow: 1px 1px 1px #ccc; /* CSS3 */
}

$(".addTextShadow").textShadow();の、.addTextShadowの部分が、影を付けたい要素のセレクタです。

さらに次回もさまざまな手法をご紹介します。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
floatで崩れた?コレでなおせ!
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読