2010年05月19日

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

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

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


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

box-shadowプロパティ


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

これも前回のopacityをIEのfilterで解決したのと同様に、filterを使います。
box-shadowは、最新のOpera(Opera10.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の部分が、影を付けたい要素のセレクタです。

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

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 16:19
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック