• RSS

[IE]PIE.htc を利用したIE8 以下向けの表示サンプル

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

IE6、IE7、IE8 でも一部の CSS3 のプロパティが使える「PIE.htc」 の記事でも紹介させていただいた PIE.htc ファイルですが、実際にIE6、IE7、IE8 で PIE.htc を使った場合の見え方はどのようになるのか??について、サンプルをまとめてみました。

CSS3 プロパティをIE8以下でも使う為に、他にも IE-CSS3.htcborder-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 のサンプル



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す