1

動的グラデーションを作成したい。私は単一の色を持っていて、以下と同じ5色のグラデーションを生成したい. 例えば。

background-image: -webkit-linear-gradient(top, 
rgba(235, 82, 164, 1.00) 0% ,
rgba(244, 49, 153, 1.00) 18% ,
rgba(245, 0, 130, 1.00) 56% ,// this color i have 
rgba(196, 0, 104, 1.00) 84% ,
rgba(171, 0, 91, 1.00) 100% );

良い効果を得るために、元の色に似た他の 4 色を取得する方法はありますか? (色の順番は薄い色から濃い色へ)

4

1 に答える 1

2

この機能は、 SASS、LESSなどのほとんどのCSSフレームワークに組み込まれています。それがどのように行われるかを知りたい場合は、選択した言語のソースコードを確認してください。ただし、これはスタイルシートのコンパイル中に行われるため、コンパイルが完了すると、ルールは静的コードとして生成されます。

たとえば、これはLESSソースコードからのものです。

[...]
lighten: function (color, amount) {
    var hsl = color.toHSL();

    hsl.l += amount.value / 100;
    hsl.l = clamp(hsl.l);
    return hsla(hsl);
},
darken: function (color, amount) {
    var hsl = color.toHSL();

    hsl.l -= amount.value / 100;
    hsl.l = clamp(hsl.l);
    return hsla(hsl);
}
[...]

function clamp(val) {
    return Math.min(1, Math.max(0, val));
}
[...]
toHSL: function () {
    var r = this.rgb[0] / 255,
        g = this.rgb[1] / 255,
        b = this.rgb[2] / 255,
        a = this.alpha;

    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2, d = max - min;

    if (max === min) {
        h = s = 0;
    } else {
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

        switch (max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2;               break;
            case b: h = (r - g) / d + 4;               break;
        }
        h /= 6;
    }
    return { h: h * 360, s: s, l: l, a: a };
}
于 2012-10-23T09:49:52.907 に答える