2

事前に色ごとに個別の CSS クラスを定義しなくても、Web ページ内で任意の色の見栄えの良いボタンを動的に作成できるようにしたいと考えています。

アルファ チャネルで CSS3 グラデーションを使用することは、これを実行するための最良の方法のように思われます。不透明度の低いグラデーションが単色の背景色の上に重ねられます。

ただし、CSS については、これが可能かどうかを判断するのに十分な知識はありません。ましてや、実際に実装することはできません。

ウェブ上で役立つと思われるリソースをいくつか見つけました。

CSS の経験が豊富な人が、これが可能かどうか教えてくれますか? また、これを簡単に実行できるようにするために、他のリソースを紹介してもらえますか?

4

2 に答える 2

1

LESSやSASSのようなものを使用すると、これを合法的に行うのはかなり簡単です。このようなミックスインを作成します（堅牢なバージョン）：

.auto-gradient(@color) {

    /* Use any of the built in functions like saturate() or spin() */
    @topcolor: lighten(@color, 20);
    @bottomcolor: darken(@color, 20);

    background: @color;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(@topcolor), to(@bottomcolor));
    background: -webkit-linear-gradient(@topcolor, @bottomcolor);
    background: -moz-linear-gradient(@topcolor, @bottomcolor);
    background: -ms-linear-gradient(@topcolor, @bottomcolor);
    background: -o-linear-gradient(@topcolor, @bottomcolor);
    background: linear-gradient(@topcolor, @bottomcolor);

        /* If using PIE.htc for IE */
    -pie-background: linear-gradient(@topcolor, @bottomcolor);
    behavior: url(pie.htc);
}

使用法：

.my-button {
    .auto-gradient(darkviolet);
}

これは有効なCSS（3）にコンパイルされ、次のようになります。

.my-button {
  background:darkviolet;
  background:-webkit-gradient(linear,0 0,0 bottom,from(#c43aff),to(#4c006d));
  background:-webkit-linear-gradient(#c43aff,#4c006d);
  background:-moz-linear-gradient(#c43aff,#4c006d);
  background:-ms-linear-gradient(#c43aff,#4c006d);
  background:-o-linear-gradient(#c43aff,#4c006d);
  background:linear-gradient(#c43aff,#4c006d);
}

注：私はlessphpDarkVioletを自分で使用していますが、現在使用しているバージョンは、小文字でない限り、名前付きの色を明るく/暗くするために渡されるように詰まっているようです。

于 2012-07-20T20:50:11.403 に答える
1

MrOBrian のUltimate CSS Gradient Generatorの提案は、これを簡単なものにしました。これは、前述のグラデーション ジェネレーターとクロス ブラウザー CSS グラデーション ボタン ガイドを組み合わせた比較的単純な CSS スタイルです。

次のコードは、背景色の CSS 属性が指定された要素に適用すると、洗練されたボタンの外観を追加します。これにより、すべてのボタンに共通のスタイルを使用し、background-color 属性を使用して色を指定できます。

JSFiddleデモ

アドバイスや提案のすべてに感謝します!

于 2012-07-20T21:31:50.710 に答える