12

IE7 +を含むすべての主要なブラウザーで機能するCSSのグラデーションを（おそらくCompassを介して）取得したいと思います。これを行う簡単な方法はありますか（多くのコードを記述せず、カスタム画像ファイルを使用せずに）？

Compassのグラデーションミックスインを見ましたが、InternetExplorerでは機能しません。

何か案は？（コンパスである必要はありません。他のものをインストールできてうれしいです。）

編集：私が取得しようとしているのは、ブラウザ間でテストされたBlowsieが投稿したようなコードを生成するフレームワーク（Compassなど）です。基本的には、前述のCompassグラデーションミックスインと似ていますが、IEをサポートしています。（私は自分のSCSSミックスインをロールインして、Blowsieのコードのようなブロックに貼り付けることに少し警戒しています。これは、テストしておらず、テストするためのリソースがないためです。）

4

3 に答える 3

29

現在のコンパスベータ（0.11.beta.6）がコンパス/ css3 / imagesモジュール（以前のグラデーションモジュールに取って代わる）でIEグラデーションを生成することをサポートしているので、合計2つの短いグラデーションを生成できることに気づきました。コマンド：

@import "compass/css3/images";
@import "compass/utilities/general/hacks";  /* filter-gradient needs this */

.whatever {
  /* IE; docs say this should go first (or better, placed in separate IE-only stylesheet): */
  @include filter-gradient(#aaaaaa, #eeeeee);
  /* Fallback: */
  background: #cccccc;
  /* CSS 3 plus vendor prefixes: */
  @include background(linear-gradient(top, #aaaaaa, #eeeeee));
}

これにより、次の多数のCSSが生成されます。

.whatever {
  *zoom: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE')";
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE');
  background: #cccccc;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #eeeeee));
  background: -moz-linear-gradient(top, #aaaaaa, #eeeeee);
  background: -o-linear-gradient(top, #aaaaaa, #eeeeee);
  background: linear-gradient(top, #aaaaaa, #eeeeee);
}

1回の呼び出しでIEと非IEのグラデーションコードを使用する方がよかったと思いますが、IEのDXImageTransformグラデーション関数はかなり制限されているため、おそらくそれは不可能です。

于 2011-04-14T21:37:41.483 に答える
2

すべてのブラウザグラデーションに使用するコード。

            background: #0A284B;
            background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
            background: -moz-linear-gradient(top, #0A284B, #135887);
            background: -o-linear-gradient(#0A284B, #135887);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
            zoom:1;

これが機能するためには、要素にhasLayoutを適用するために、高さまたはズーム：1を指定する必要があります。

于 2011-04-14T15:44:48.527 に答える
-1

グラデーションの複雑さは限られていますが、「大量のコード」と見なされるものを必要とするほど複雑です。

検討：

  • 開始色、終了色、および一方と他方の間で遷移するために必要な16進演算
  • 「ステップ」の数
  • 各ステップの幅/高さ
  • これを行う純粋なCSSの方法はないため、既存のHTMLを台無しにすることなく、色/ステップごとに1つの要素であるHTMLをレンダリングすることを意味します。

したがって、いいえ、これらすべてを実行するプラグインがなければ、少しのコードまたは画像が必要になります。

于 2011-04-14T14:53:27.547 に答える