IE8でCSS3を使うためのPIE.jsを使ってグラデーションを実装してみる

クライアントのサイトがIE8対応必須なので、PIE.jsの使い方のおさらいとして記事にしてみました。

PIE.jsのダウンロード

こちらからダウンロードできます。

http://css3pie.com/download/

 

ファイルを解凍し、pie.jsだけを使います。

 

HTMLに記述

head内に以下を記述。

 <script type="text/javascript" src="js/PIE.js"></script> 

CSS3を適用するクラスタを指定する

<script>
$(function() {
  if (window.PIE) {
    $('ここにCSSクラスタを記述').each(function() { /*CSSクラスタは複数記述可。「,」でセパレートしてください。
      PIE.attach(this);
    });
  }
});
</script>

CSSを記述する

CSSにグラデーションを記述する ※例:グレーグラデーション

{
background: #f0f0f0;/* Old browsers */
    background: -moz-linear-gradient(top, #feffff 0%, #dddddd 100%);/* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #feffff 0%,#dddddd 100%);/* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #feffff 0%,#dddddd 100%);/* Opera 11.10+ */
    background: -ms-linear-gradient(top, #feffff 0%,#dddddd 100%);/* IE10+ */
    background: linear-gradient(to bottom, #feffff 0%,#dddddd 100%);/* W3C */
    -pie-background: linear-gradient(top, #feffff 0%,#dddddd 100%);/* PIE.js */
    -moz-box-shadow: 0px 1px 3px #999;
    -webkit-box-shadow: 0px 1px 3px #999;
    box-shadow: 0px 1px 3px #999;
}

これでIE8にもCSS3が実装できます。

関連記事一覧

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP