| ブログトップ | CSS関連 | HTML関連 |

IEでもCSS3 その2(PIE)

今回は、角丸・ドロップシャドウ・グラデーションを行います。

※印刷にて重大なバグあり。使用にはご注意を!

※印刷バグは「version1.0 beta4」においてある程度解消されましたが、その代わり、印刷においてPIEは実行されません。(試しに当サイトをIEで印刷プレビューをご覧ください。角丸の効果がなくなっています。)

 

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

PIEでできるCSS3機能は以下のとおりです。

  • border-radius:角丸
  • box-shadow:ドロップシャドウ
  • linear-gradient:グラデーション
  • border-image:ボーダー画像
  • multiple background images:1つのクラス・IDに複数の画像を設定

※「ボーダー画像」について、あまりピンとこない方はこちらのサイトをご参照ください。非常にわかりやすく説明されています。 「PXT255;さん」のサイト

 

手順

1.まずはこちらのサイトから「PIE」をダウンロードしてください。

2.次にスタイルにて、各設定を行います。(今回ははじめからbehavior: url(PIE.htc);を入力しておきます。)

.box {

padding:10px;

/*角丸*/
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, IE */

/*ドロップシャドウ*/
-moz-box-shadow: 5px 5px 15px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 15px #000; /* Safari and Chrome */
box-shadow: 5px 5px 15px #000; /* Opera 10.5+, IE */

/*グラデーション*/
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#999999));
background: -moz-linear-gradient(#FFFFFF, #999999);
-pie-background: linear-gradient(#FFFFFF, #999999);

behavior: url(PIE.htc);
}

/*border-image*/
.bi_text{

padding:10px;

border: 1px solid #a3a3a2;
-moz-border-image: url(img/scotch-tape.png) 2 8 2 8 / 2px 8px 2px 5px;
-webkit-border-image: url(img/scotch-tape.png) 2 8 2 8 / 2px 8px 2px 5px;
border-image: url(img/scotch-tape.png) 2 8 2 8 / 2px 8px 2px 5px;

behavior: url(PIE.htc);
}

/*Multiple background images*/
.multiple_box{

width:600px;
height:400px;

/*Firefox等用*/
background:
url(img/Winter.jpg) no-repeat top left,
url(img/Waterlilies.jpg) no-repeat center center,
url(img/Blue_hills.jpg) no-repeat 100% 100%;

/*PIE用*/
-pie-background:
url(img/Winter.jpg) no-repeat top left,
url(img/Waterlilies.jpg) no-repeat center center,
url(img/Blue_hills.jpg) no-repeat 100% 100%;

behavior: url(PIE.htc);
}

※2010/11/09 : PIE用のMultiple background imagesの記述を追記しました。

各クラスの最後に、1.でダウンロードした「behavior: url("PIE.htcへのパス");」を記述するのを忘れないよう注意してください。

※なおグラデーションは、Firefoxの場合3.6以上でないと表示されませんのでご注意ください。

3.スタイルの設定は

  • 「角丸」「ドロップシャドウ」「グラデーション」はclass「box」
  • 「border-image」はclass「bi_text」
  • 「Multiple background images」はclass「multiple_box」

というclass名にしていますので、body内にそれぞれを含んだタグを記述してください。(以下例)

<h2>border-radius/box-shadow/linear-gradient</h2>
<div class="box">角丸とドロップシャドウ、グラデーション</div>

<h2>border-image</h2>
<p class="bi_text">border-imageとはボーダーに画像を適応させるもの</p>

<h2>multiple background images</h2>
<div class="multiple_box"></div>

これで、IE8でも対応できるようになります。

サンプル [新しいウィンドウで開く]

※サンプルでは見やすいようにタグのスタイルをあらかじめ設定しています。

※サンプルの「border-image」の背景に使用している画像「scotch-tape.png」は「2xup.org blog」さんのサイトから借用しました。正常に表示されればなかなかかっこいい背景になります。

と言いたいところなんですが、「border-image」と「multiple background images(※1)はなぜか、IEで正常に動作しませんでした。できるはずなんですけどねぇ・・・;

こちらについてはもうしばらく調べてみます。

 

今回参考にさせていただいたサイト

このエントリーをはてなブックマークに追加

LINEで送る

nandani | 2010年07月21日 | コメント(0) | トラックバック(5) | CSS関連 | HTML関連

トラックバック

トラックバックURL

トラックバック一覧

[...] 「IEでもCSS3」シリーズの記事で「PIE.htc」「ie-css3.htc」「css3shadow.htc」を紹介しましたが、サーバによっては効かない場合があります [...]

[...] 「IEでもCSS3 その2(PIE)」で「Multiple background images」のやり方がわからないと書いたのですが、ようやくやり方がわかりました。サンプル [...]

3. たつみんのMEMOφ(・ω・) » IE6で角丸 | 2011年05月30日 5:48 PM

[...] 設定は下記サイトを参考にしました。素敵にまとめて下さっています。 http://www.nandani.sakura.ne.jp/web_all/html/308/ [...]

4. IEでもCSS3を実現する方法 | e-sign | 2012年02月15日 3:43 PM

[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス IEでもCSS3 ほんっとにはじめてのHTML [...]

[...] table内に記述しているaタグに、角丸とドロップシャドウをかけてボタンっぽくしたのですが、なぜかIE9でドロップシャドウが効かない状態になりました。(PIEを使用していたのでIE7,8は大丈夫だった。) [...]

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記