| ブログトップ | CSS関連 |

IEでもCSS3 その3(css3shadow)

今回の方法では、ドロップシャドウ・テキストシャドウができます。

 

「css3shadow」を利用する方法。(参考サイト:ppBlogさんのサイト

css3shadowでできるCSS3機能は以下のとおりです。

  • -moz-box-shadow または -webkit-box-shadow : ドロップシャドウ
  • text-shadow : テキストシャドウ

css3shadowのIE用ドロップシャドウでは「box-shadow」ではなく、「-moz-box-shadow」または「-webkit-box-shadow」で記述します。もちろん両方書いていても大丈夫です。

 

手順

1.まずはこちらのサイトから「css3shadow」をダウンロードしてください。(リンク先の下のほうにある「添付ファイル:css3shadow.htc」をクリックしてください。)

2.htmlファイルに以下を記述し、「css3shadow.htc」を呼び出してください。(css3shadowではbehaviorで呼び出しても有効になりません)

<!--[if IE]>
<script type="text/javascript" src="css3shadow.htc"></script>
<![endif]-->

3.スタイルシートを設定してください。なお、css3shadowではinsetによる内部シャドウが使用できます。
(ie-css3とPIEでは現在確認したところ、できませんでした)
通常のドロップシャドウにする場合はこの「inset」を削除してください。

.box{
padding:20px;
background-color:#FFF;
border: solid 10px #999;
width: 500px;
  
font: 18px Arial; color: #555;
-moz-box-shadow: inset 0px 0px 12px rgba(10, 10, 10, 0.95);
-webkit-box-shadow: inset 0px 0px 12px rgba(10, 10, 10, 0.95);
text-shadow: 0px 2px 3px rgba(10, 30, 100, 0.3);
}

4.スタイルは、ドロップシャドウ・テキストシャドウともにclass「box」という名前にしていますので、body内にそれぞれを含んだタグを記述してください。(以下例)

<div class="box">
<p>「css3shadow」では、insetによる内部シャドウが使用できます。</p>
<p>「css3shadow.htc」を呼び出す場合は、behaviorではなく、scriptタグで呼び出してください。</p>
</div>

これで、IEでも対応できるようになります。

サンプル [新しいウィンドウで開く]

※サンプルではinsetによる内部シャドウを使用しています。

 

注意事項

シャドウを設定しているクラスで「text-align:center;」を使うと、「こちら」のようにとんでもない結果になります。使う場合はそのクラスの中にもうひとつタグを入れてそちらで「text-align:center;」を使ってください。

上記の問題、ご対応いただけたようです。製作者様ありがとうございました^^

 

今回参考にさせていただいたサイト

ppBlog : 該当記事「IEでCSS3のドロップシャドウを使いたい

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

LINEで送る

nandani | 2010年07月22日 | コメント(2) | トラックバック(1) | CSS関連

トラックバック

トラックバックURL

トラックバック一覧

[...] 「IEでもCSS3」シリーズの記事で「PIE.htc」「ie-css3.htc」「css3shadow.htc」を紹介しましたが、サーバによっては効かない場合があります。 [...]

コメント一覧

1. Posted by martin   2010年08月04日

はじめまして、martinです。TrackBackありがとうございました。「text-align:center;」の件、最新の記事で対応してみました。

2. Posted by nandani   2010年08月04日

martinさん、はじめまして。
早急に対応いただけたようで、ありがとうございました。
記事も修正しておきました。

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記