1

CSSで透明グラデーションを作ってみました。カラーピッカーアプリに必要です。使用できる透明な PNG がありますが、そのサイズは 20kb であり、新しい HTTP 要求を要求します。コードは超軽量でなければなりません。

これが私がこれまでに行ったことです: http://jsfiddle.net/78SEK/ 上のものは良いもので、下のものは CSS で作られています。

HTML5 Canvas でも何かを試してみましたが、完全に一致するものは得られませんでした。これを行う方法はありますか？ありがとう

4

1 に答える 1

1

必要なグラデーションは 2 つだけです。左から右に白から透明になるものと、上から下に透明から黒になるもの:

http://jsfiddle.net/SKFRS/

HTML:

<div id="white_grad"><div id="black_grad"></div></div>
<p>CSS3 Gradient</p>

CSS:

#white_grad {
    background:-moz-linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) repeat scroll 0 0 transparent;
    height:255px;
    width:255px;
}

#black_grad {
    background:-moz-linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)) repeat scroll 0 0 transparent;
    border:1px solid #333333;
    height:255px;
    width:255px;
}

下のグラデーションを透明ではなく、黒から目的の色にすることもできます。次に、背景を任意の色にすることができ、div には目的の効果があります。

http://jsfiddle.net/SKFRS/3/

プログラムで変更したい場合は、最初の方法の方がおそらく良いでしょう。

于 2010-04-29T18:15:13.857 に答える