IE-CSS3でテキストシャドウをIE対応させてみた

IE-CSS3でテキストシャドウをIE対応させてみた

このブログのナビゲーションにテキストシャドウを使用しているんですが、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でみたキャプチャです…
E8でみたキャプチャ

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

IE-CSS3のtext-shadowのdemo

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

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

•Safari
Safariでみたキャプチャ
•IE8
IE8でみたキャプチャ
•IE7
IE7でみたキャプチャ
•IE6
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); 
}

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能