IE6~8でもCSS3

いろいろ方法があるようですが・・・
Windows7の場合、IE6がないので、XPモードかExpression Web SuperPreviewを導入することで確認できます。
以下のブラウザで確認しています。

ブラウザバージョン
Internet Explorer6(Expression Web SuperPreview)
Internet Explorer9
FireFox9.0.1
Safari5.1.2
Chrome17.0.963.56 m
Opera11.61

PIE.htc

角丸、ドロップシャドウ、グラデーション、ボーダー画像、マルチ背景画像を利用できるようになるようです。
制限もあるようです。
角丸、ドロップシャドウ、グラデーションは試してみたのでそのメモ。

PIE.htcの置き場所

PIE.htcは表示したいページと同じ場所になければなりません。
というのも、現在のページを基準とするため、外部CSSで相対パスで指定した場合、パスがおかしくなります。
具体的には、以下のように対置します。

/
|
+-/css
| |
| +-xxx.css
| |
| +-PIE.htc   ←ここはダメ
|
+-/sub
| |
| +-xxx.html
| |
| +-PIE.htc
|
+-xxx.html
|
+-PIE.htc

PIE.htcのダウンロードと使い方

CSS3 PIE_ CSS3 decorations for IEで配布されているPIE.htcをダウンロードします。
そして、CSS3を使いたいクラスに、以下の記述を追加します。

#codeprettify{{ behavior: url(PIE.htc); }}

角丸(border-radius)

境界線の角を丸くします。

#codeprettify{{ /* border-radius:半径 */ border-radius: 15px; behavior: url(PIE.htc); }}

css_001.png
*左からIE9,Chrome,FireFox,Safari,Opera,Expression Web SuperPreviewのIE6

PIEではborder-top-left-radiusなどの指定はできません。
左上を指定する場合は

#codeprettify{{ /* border-radius:左上 右上 右下 左下 */ border-radius: 15px 0 0 0; behavior: url(PIE.htc); }} というように指定します。
css_002.png
*左からIE9,Chrome,FireFox,Safari,Opera,Expression Web SuperPreviewのIE6
IE6だとちょっと描画が違いますね^^;

グラデーション(linear-gradient)

グラデーションで色を塗ります。

#codeprettify{{ /* Chrome, Safari */ background: -webkit-gradient(linear, 0 0, 0 bottom, from(#AFAFFF), to(#000066)); /* FireFox */ background: -moz-linear-gradient(#AFAFFF, #000066); /* Opera */ background: -o-linear-gradient(#AFAFFF, #000066); /* IE6-9 linear-gradient(開始色, 終了色)*/

グラデーションの方向も変えることができます。

#codeprettify{{ /* Chrome, Safari */ background: -webkit-gradient(linear, right 0, 0 0, from(#AFAFFF), to(#000066)); /* FireFox */ background: -moz-linear-gradient(right, #AFAFFF, #000066); /* Opera */ background: -o-linear-gradient(right, #AFAFFF, #000066); /* IE6-9 linear-gradient(方向, 開始色, 終了色)*/

ドロップシャドウ(box-shadow)

#codeprettify{{ /* Opera, IE6-9, FireFox 9.0.1, Safari 5.1.2 */ box-shadow: 5px 5px 8px #000; behavior: url(PIE.htc); }} css_005.png
*左からIE9,Chrome,FireFox,Safari,Opera,Expression Web SuperPreviewのIE6

参考


添付ファイル: filecss_005.png 335件 [詳細] filecss_004.png 333件 [詳細] filecss_003.png 324件 [詳細] filecss_002.png 332件 [詳細] filecss_001.png 329件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-02-18 (土) 13:25:52