category
サイト構築 -CSS

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。

サイトのキャプチャ

CSS3 PIE_ CSS3 decorations for IE
デモ

デモではCSS3の角丸、ボックスシャドウ、グラデーションをリアルタイムに試すことができます。

デモのキャプチャ

IE7でのキャプチャ
CSS3が美しく適用されています。

上記は「CSS3 PIE」を使用した状態で、「Enable PIE 」のチェックボックスをオフにすると無効の状態になります。

デモのキャプチャ

「CSS3 PIE」をオフにしたキャプチャ
角丸もグラデーションも無しの状態になりました。

「Show CSS」のチェックボックスをオンにすると、現在のスタイルシートが表示されます。

デモのキャプチャ

上記デモのスタイルシート
※クリックで拡大

「CSS3 PIE」の使い方は簡単で、既存のCSS3のスタイルシートに一行を追加するだけです。

適用前のCSS

「CSS3 PIE」を適用

既存のスタイルシートの最後に、behaviorスクリプトとして「PIE.htc」を指定します。

「PIE.htc」は下記ページよりダウンロードできます。
PIE download

「CSS3 PIE」がサポートしているCSS3のプロパティは下記の通りで、他のプロパティへの対応も開発中ということです。

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

以前紹介した「IE-CSS3」よりも対応しているプロパティが多く、シャドウも綺麗に表示されていると思います。

Post on:2010年7月14日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

» たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス My_Room-bookmarks
on 2010年7月14日

[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス [...]

わお。 - 空雨露
on 2010年7月14日

[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする [...]

links for 2010-07-14 « 個人的な雑記
on 2010年7月15日

[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス (tags: css) [...]

freewebdev.jp
on 2010年7月17日

たった一行を追加するだけでIE6/7/8をCSS3対応にする

「CSS3 PIE: CSS3 decorations for IE」
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。

デモではCSS3の角…

ITキヲスク | 2010年7/11~7/17の週間ブックマーク
on 2010年7月18日

[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス [...]

Bookmarks of This Week (7/11-7/18) - Sometime PHP
on 2010年7月18日

[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス [...]

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス « 前夜の小さな欠点
on 2010年7月19日

[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス [...]

簡単に実装できるCSS3プロパティ…しかもIEにも対応できる | hT DESIGN blog
on 2010年7月19日

[...] 基本的にIEではCSS3は非対応なのですが、colissさんでも紹介されているCSS3 PIEを使えば、たった一行のコードを追加するだけでIEをCSS3対応にさせることができます。※対応ヴァージョンはIE [...]

日刊ウェブログ式
on 2010年7月20日

ココを押えておけばCSS3がだいたい分かるツール集

CSS3に対応した便利ツールや それを利用するために必要となる予備知識の参考記事をご紹介します。

IEでもCSS3 その2(PIE) | ダリの雑記:WEBプログラム版
on 2010年7月21日

[...] 「PIE」を利用する方法。(参考サイト:コリスさんのサイト) [...]

kase
on 2010年8月3日

Safariも対応済みですか?

コリス
on 2010年8月3日

> kase さん

SafariはCSS3に対応しているので、CSS3 PIEは必要無いですよ。

CSS3の表現でデザインをちょっと素敵にするサンプル 8
on 2010年8月21日

[...] ご存知のとおりIEはCSS3に対応していません。 このブログでは以前コリス:たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIEで紹介されていたbehaviorスクリプトを使用しています。 [...]

クロスブラウザチェックと角丸—(2) » Wake Up one make
on 2010年8月24日

[...] 行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE http://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html [...]

ページの先頭へ




© coliss

RSS