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による角丸のサンプルコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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によるドロップシャドウのサンプルコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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();を追加することがポイントです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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のサンプル
コメント