Zablokowany efekt gradientu w CSS3

Question

Czy można sprawić, aby poniższy gradient wyglądał bardziej "blokowo", aby zamiast zmieniać kolor z zielonego na czerwony, robi się to w taki sposób, jak na poniższym obrazku?

Pożądany efekt:

Aktualnie

#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>

Idealnie, chciałbym móc ustawić zmienną więc mogę wybrać ile blokuje gradient składałby się z. Czy ktoś może pomóc?

Answer 1

Można to osiągnąć stosując linear-gradient. Ustawianie wielu kolorów gradientu można wykonać, przypisując wiele przystanków kolorów, a efekt blokowy można uzyskać, rozpoczynając następny kolor w dokładnie tym samym miejscu, w którym kończy się bieżący kolor (to jest ten sam procent zatrzymania dla końcowego położenia bieżącego koloru i położenie początkowe następnego koloru).

W standardami przeglądarek zgodnych, po to tylko linii kodu, które byłyby potrzebne:

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

Jednak już w celu uzyskania podobnego efektu w starszych wersjach przeglądarek, musimy to sprzedawca wersje prefiksowane również.

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>

Dla IE 9 i niższe, musielibyśmy użyć filters jak wspomniano w this CSS Tricks article ponieważ nie obsługują linear-gradient.

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>

widać jak stop # 2BFF00 jest w tej samej lokalizacji # 00A3EF w 50%.

Answer 3

można użyć box-shadow jeśli chcesz pewien kolor, aby pokazać

#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

Niektóre przykłady z użyciem gradientów:

.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

Stosować kilka przystanków (chociaż trzeba określić kroki pośrednie, nie może odbywać się automatycznie)

#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>