[IE]PIE.htc を利用したIE8 以下向けの表示サンプル
スポンサード
※IEのバージョン別で見え方を確認するには こちらのデモページ をご覧下さい。
border-radius のサンプル
box-shadow のサンプル
PIE.htc を利用する場合に、PIE 用の
を追加することがポイントです。
linear-gradient のサンプル
スポンサード
IE6、IE7、IE8 でも一部の CSS3 のプロパティが使える「PIE.htc」 の記事でも紹介させていただいた PIE.htc ファイルですが、実際にIE6、IE7、IE8 で PIE.htc を使った場合の見え方はどのようになるのか??について、サンプルをまとめてみました。
CSS3 プロパティをIE8以下でも使う為に、他にも IE-CSS3.htc や border-radius.htcの などのHTCファイルにもついても紹介してきましたが、結論としては PIE.htc を使うのが一番良さげな感じがします。
PIE.htc を利用したIE下位バージョン向けサンプル
以下、CSS3 のプロパティ別にまとめています。※IEのバージョン別で見え方を確認するには こちらのデモページ をご覧下さい。
border-radius
まずはborder-radius
による角丸のサンプルコードです。.box { border:1px solid #ccc; background:#fefefe; padding:20px 10px; text-align:center; /*border-radius*/ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; /*PIE.htc の利用*/ position:relative; behavior: url(./PIE.htc); }IE6〜8 で見るとこのような↓見え方になります。
border-radius のサンプル
box-shadow
続いてbox-shadow
によるドロップシャドウのサンプルコードです。.box { border:1px solid #ccc; background:#fefefe; padding:20px 10px; text-align:center; /*box-shadow*/ -moz-box-shadow:10px; -webkit-box-shadow:10px; box-shadow:10px; /*PIE.htc の利用*/ position:relative; behavior: url(./PIE.htc); }IE6〜8 で見るとこのような↓見え方になります。
box-shadow のサンプル
linear-gradient
最後はlinear-gradient
によるグラデーションのサンプルコードですが、こちらについてはPIE.htc を利用する場合に、PIE 用の
-pie-background: linear-gradient();
を追加することがポイントです。
.box { border:1px solid #ccc; padding:20px 10px; text-align:center; /*linear-gradient*/ background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefefe) to(#ededed)); background: -webkit-linear-gradient(top, #fefefe, #ededed); background: -moz-linear-gradient(top, #fefefe, #ededed); background: -o-linear-gradient(top, #fefefe, #ededed); background: linear-gradient(to bottom, #fefefe, #ededed); /*-pie-background も合わせて指定*/ -pie-background: linear-gradient(top, #fefefe, #ededed); /*PIE.htc の利用*/ position:relative; behavior: url(./PIE.htc); }IE6〜8 で見るとこのような↓見え方になります。
linear-gradient のサンプル
スポンサード
コメント