第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プロパティ
その名前の通り、文字に影を付けられるプロパティです。
これは、jQueryのプラグインで解決できます。
jQueryの使い方はこの辺をご参考に。
<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の部分が、影を付けたい要素のセレクタです。
さらに次回もさまざまな手法をご紹介します。
では次回もお楽しみに。（こう
）
お問い合わせ
メルマガ