memocarilog

このブログのナビゲーションにテキストシャドウを使用しているんですが、IEでもシャドウをみれるようにしようと思いIE-CSS3をつかってテキストシャドウを適用させてみました。

※追加記事あります”IE-CSS3”でIEの表示が上手く行かない | memocarilog”

IE-CSS3の使用方法

まず、IE-CSS3のサイトの左上のリンクから、ie-css3.htcファイルをダウンロードします。（このスクリプトの配布ページがなくなってしまったようです。）
ダウンロードしたie-css3.htcファイルはサーバーの適当な場所へアップロードします。

あとは、スタイルシートのテキストシャドウを指定した要素のプロパティに”behavior: url(パス/ie-css3.htc); ”を付け足すだけです。
ie-css3.htcファイルへのパスはhtmlファイルから見た絶対パスで指定します。

このブログのナビゲーション部分のcssです。”text-shadow:”のところにbehavior: を付け足しました。

#globalnavi li{
	float: left;
        display:inline;
}
#globalnavi li a{
	line-height: 55px;
	color: black;
	text-shadow: 0px 1px 5px white;
	padding: 0 30px 0 0;
	height: 55px;
	display: block;
	font-size: 20px;
	behavior: url(https://memocarilog.info/ie-css3.htc);}

これでIEへの対応ができました！

IE8でみたキャプチャです…

こちらはSafariでみたキャプチャです。

他のブラウザで見た時と、シャドウの表示のされ方が思ったより違いました。
もっとテキストシャドウが小さい場合ならまだよいかもしれません…。
ボックスシャドウや角丸はどうなんでしょうか？今度検証してみようと思います。

IE-CSS3のtext-shadowのdemo

実際他のシャドウはどんな感じなのか気になったのでデモをつくって見比べてみました。

↓Safariでデモページを見たキャプチャとIEテスターでみたキャプチャです。

•Safari

•IE8

•IE7

•IE6

やっぱりテキストシャドウはIEシリーズで見るとちょっとちがった感じにみえますね…。

demoのcssコードです↓

.examplebox{
margin-top: 30px;
box-shadow: 2px 2px 10px #ccc;
-moz-box-shadow: 2px 2px 10px #ccc;
-webkit-box-shadow: 2px 2px 10px #ccc;
}
.examplebox p{
text-shadow: 1px 1px 5px #333333;
padding: 20px;
behavior: url(/memocarilog-demo/demo-IE-CSS3/ie-css3.htc); 
}