[IE]IE6、IE7、IE8 で角丸やドロップシャドウなどを利用できる「IE-CSS3.htc」
スポンサード
PIE.htc の時と同様、IEのビヘイビア 機能を利用して HTC ファイルをHTML 上で使用できるようにします。
IE-CSS3.htc のデモ
あと、過去の経験上、css3-mediaqueries.js を使っていると何故かレイアウトが崩れる模様…。
CSSファイル上で
影の色は何を指定しても「黒色」です。
ぼかし具合については、.htcファイル自体を編集して透明度を編集する方法もあるみたい…ですが、部分的に透明度を調整はできません。
IE-CSS3.htc のデモ
スポンサード
以前に紹介させていただいた PIE.htc ファイルと同様、IE6、IE7、IE8 でも CSS3 のプロパティを利用できるファイルが「IE-CSS3.htc」です。
PIE.htc と基本的な使い方は同じですが、利用できるプロパティが若干変わってきます。
目次
IE-CSS3.htc で利用できるプロパティ
IE-CSS3.htc を使うことで、以下の CSS3 プロパティがIE下位バージョンでも利用できるようになります。 ・border-radius
・box-shadow
・text-shadow
※PIE.htc との違いは、グラデーションが利用できない分、・box-shadow
・text-shadow
text-shadow
を利用できるというイメージです。IE-CSS3.htc のダウンロード
以下のページより ie-css3.htc のファイルをダウンロードします。IE-CSS3.htc の使い方
「角丸のborder-radius
」と組み合わせた例です。PIE.htc の時と同様、IEのビヘイビア 機能を利用して HTC ファイルをHTML 上で使用できるようにします。
.box { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; /*PIE.htc を利用*/ behavior:url("./ie-css3.htc"); }
IE-CSS3.htc のサンプル
以下のページに、IE-CSS3.htc を利用した「角丸」「ドロップシャドウ」「テキストシャドウ」のサンプルを掲載しています。IE-CSS3.htc のデモ
IE-CSS3.htc の注意点
IETester でしか検証していませんが、IE-CSS3.htc を実際に使ってみると一筋縄ではいかないコトがちょこちょこ出てきます。border-radius などが、IE8で 正常に表示されない場合
これは全体のレイアウトにも依りますので何とも言えませんが、IE8 でどうしても角丸がズレて表示される…なんて場合は、behavior
を使う要素で position:relative
と合わせて z-index:1
を付けると上手くいく場合があります。.box { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; /*PIE.htc を利用*/ position:relative; z-index:1; behavior:url("./ie-css3.htc"); }
あと、過去の経験上、css3-mediaqueries.js を使っていると何故かレイアウトが崩れる模様…。
IE6 で正常に動かない場合
これも過去の経験から、IE6 用に minmax-1.0.js ファイルを読み込み、CSSファイル上で
min-width
、max-width
を使っている場合に、レイアウトがおかしくなる場合もあります。ドロップシャドウの色が変更でない
IE-CSS3.htc では、box-shadow
のプロパティは使えるものの、ドロップシャドウ(影)の色を変更できなかったり、ぼかし具合を調整できない…などの問題もあります。影の色は何を指定しても「黒色」です。
ぼかし具合については、.htcファイル自体を編集して透明度を編集する方法もあるみたい…ですが、部分的に透明度を調整はできません。
テキストシャドウがIE6 だと上手く調整できない
これは当ブログのデザインにも原因があるのだと思いますが、以下のデモページをIE6(IETester)で見ても、text-shadow
が上手く効いてくれません。IE-CSS3.htc のデモ
スポンサード
コメント