Blocky-Farbverlauf-Effekt in CSS3

Question

Ist es möglich, den unteren Farbverlauf "blockiger" aussehen zu lassen, so dass statt schrittweise von grün auf rot in Schritten wie unten abgebildet zu gehen?

gewünschte Wirkung:

Derzeit:

#gradients { 
 
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #00FF00), color-stop(0.5, #FFFF00), color-stop(1, #FF0000)); 
 
    background-image: -o-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%); 
 
    background-image: -moz-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%); 
 
    background-image: -webkit-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%); 
 
    background-image: -ms-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%); 
 
    background-image: linear-gradient(to right, #00FF00 0%, #FFFF00 50%, #FF0000 100%); 
 
}

<div id="gradients" style="width:450px; height:20px"></div>

Idealerweise würde ich in der Lage sein, eine Variable zu setzen, damit ich, wie viele Blöcke können wählen, die Steigung würde bestehen aus. Kann jemand helfen?

Answer 1

Diese linear-gradient Verwendung erreicht werden kann. Das Festlegen mehrerer Farben für den Farbverlauf kann durch Zuweisen mehrerer Farbstopps erfolgen, und der Blocky-Effekt kann erreicht werden, indem die nächste Farbe genau an der Stelle beginnt, an der die aktuelle Farbe endet (dh der gleiche Prozentsatz für die Endposition der aktuellen Farbe) und die Startposition der nächsten Farbe).

In der gängigen Standard-Browser ist die folgend die einzige Codezeile, die benötigt würde:

background: linear-gradient(to right, green 20%, 
          yellowgreen 20%, yellowgreen 40%, 
          yellow 40%, yellow 60%, 
          orange 60%, orange 80%, red 80%); 

jedoch in Ordnung, einen ähnlichen Effekt bei älteren Browser-Versionen zu produzieren, müssen wir die Lieferanten gehören Präfixe auch.

div { 
 
    height: 20px; 
 
    width: 450px; 
 
    background: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.2, green), color-stop(0.2, yellowgreen), color-stop(0.4, yellowgreen), color-stop(0.4, yellow), color-stop(0.6, yellow), color-stop(0.6, orange), color-stop(0.8, orange), color-stop(0.8, red)); 
 
    background: -webkit-linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%); 
 
    background: -moz-linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%); 
 
    background: -o-linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%); 
 
    background: linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%); 
 
}

<div></div>

Für IE 9 und unteren, würden wir filters wie in this CSS Tricks article erwähnt verwenden, weil sie linear-gradient nicht unterstützen.

Can I Use - Linear Gradients

Answer 2

div { 
 
    height:200px; width:400px; display:block; 
 
    background-image: linear-gradient(to left, #2BFF00 50%, #00A3EF 50%); 
 
}

<div></div>

Sie sehen, wie der Anschlag von # 2BFF00 an der gleichen Stelle des # 00A3EF in 50% liegt.

Answer 3

Sie box-shadow verwenden können, wenn Sie bestimmte Farbe wünschen

#gradients { 
 
    width: 52px; 
 
    display: block; 
 
    height: 30px; 
 
    background: #22b14c; 
 
    box-shadow: #b5e61d 52px 0px 0px 0px, 
 
       #fff200 104px 0px 0px 0px, 
 
       #ffc90e 156px 0px 0px 0px, 
 
       #ff7f27 208px 0px 0px 0px, 
 
       #ed1c24 260px 0px 0px 0px; 
 
}

<div id="gradients"></div>

Answer 4

Einige Beispiele unter Verwendung von Gradienten zu zeigen:

.gradient { 
 
    width:450px; 
 
    height:20px; 
 
} 
 
.g-1{ 
 
    background-color: #FFFF00; 
 
} 
 
.g-3{ 
 
    background-image: linear-gradient(
 
    to right, 
 
    #00FF00 33%, #FFFF00 33%, 
 
    #FFFF00 66%, #FF0000 66% 
 
); 
 
} 
 
.g-5{ 
 
    background-image: linear-gradient(
 
    to right, 
 
    #00FF00 20%, #80FF00 20%, 
 
    #80FF00 40%, #FFFF00 40%, 
 
    #FFFF00 60%, #FF8000 60%, 
 
    #FF8000 80%, #FF0000 80% 
 
); 
 
} 
 
.g-9{ 
 
    background-image: linear-gradient(
 
    to right, 
 
    #00FF00 11%, #40FF00 11%, 
 
    #40FF00 22%, #80FF00 22%, 
 
    #80FF00 33%, #C0FF00 33%, 
 
    #C0FF00 44%, #FFFF00 44%, 
 
    #FFFF00 56%, #FFC000 56%, 
 
    #FFC000 67%, #FF8000 67%, 
 
    #FF8000 78%, #FF4000 78%, 
 
    #FF4000 89%, #FF0000 89% 
 
); 
 
} 
 
.g-17{ 
 
    background-image: linear-gradient(
 
    to right, 
 
    #00FF00 6%, #20FF00 6%, 
 
    #20FF00 12%, #40FF00 12%, 
 
    #40FF00 18%, #60FF00 18%, 
 
    #60FF00 24%, #80FF00 24%, 
 
    #80FF00 29%, #A0FF00 29%, 
 
    #A0FF00 35%, #C0FF00 35%, 
 
    #C0FF00 41%, #D0FF00 41%, 
 
    #D0FF00 47%, #FFFF00 47%, 
 
    #FFFF00 53%, #FFD000 53%, 
 
    #FFD000 59%, #FFC000 59%, 
 
    #FFC000 65%, #FFA000 65%, 
 
    #FFA000 71%, #FF8000 71%, 
 
    #FF8000 76%, #FF6000 76%, 
 
    #FF6000 82%, #FF4000 82%, 
 
    #FF4000 88%, #FF2000 88%, 
 
    #FF2000 94%, #FF0000 94% 
 
); 
 
} 
 
.g-inf{ 
 
    background-image: linear-gradient(
 
    to right, 
 
    #00FF00 0%, 
 
    #FFFF00 50%, 
 
    #FF0000 100% 
 
); 
 
}

<div class="gradient g-1"></div> 
 
<div class="gradient g-3"></div> 
 
<div class="gradient g-5"></div> 
 
<div class="gradient g-9"></div> 
 
<div class="gradient g-17"></div> 
 
<div class="gradient g-inf"></div>

Answer 5

Verwenden Sie mehrere Anschläge (obwohl Sie die Teilschritte definieren müssen, kann es nicht automatisch erfolgen)

#gradients { 
 
    background-image: linear-gradient(to right, 
 
    green  0%,  green  14.28%, 
 
    greenyellow 14.28%, greenyellow 28.58%, 
 
    yellow  28.58%, yellow  42.85%, 
 
    orange  42.85%, orange  57.14%, 
 
    darkorange 57.14%, darkorange 71.42%, 
 
    red   71.42%, red   85.71%, 
 
    brown  85.71%); 
 
}

<div id="gradients" style="width:450px; height:20px"></div>