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が実装できます。

集客に困らない仕組みを作りたい人は、他にいませんか?

自社のサービス、商品だからこそ気づかない「本当の魅力」を引き出し「お客に届くメッセージ」を作ります。
今まで幾度となく集客に成功し、売上アップの実績を上げているノウハウを基にしていますので貴社でも十分効果を発揮します。
ステップメールやメルマガ、チラシ・DMなどなど、お客様へのアプローチを無駄にせずしっかり利益の残る仕組みにしませんか?
「うちは特殊な業界だから...」と諦める必要はありません。

カサネルが行っているのはどんな業種、業態、客層でも十分通用する「普遍」の集客プラン。
貴社でもできるアドバイスがたくさんあります。

もし、あなたが毎日「売上を上げるには...」と悩んでいるのなら、今すぐお問い合わせください。

お問い合わせはこちら

関連記事一覧

コメント

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

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

CAPTCHA


PAGE TOP