Wie macht man einen kontinuierlichen Gradienten?

Question

Ich habe mehrere <a> und ich wollte einen Gradienten, der durch alle von ihnen geht, ohne zu brechen. Ich habe eine jsfiddle gemacht, um expliziter zu sein, in der jsfiddle der Gradient beginnt und endet in der gleichen <a>, aber ich wollte in der ersten beginnen und in der letzten enden.

body{ 
 
     background: lightgray; 
 
    } 
 
    .tabs{ 
 
    margin: 3% 0 0 3%; 
 
} 
 

 
.tab { 
 
    text-decoration: none; 
 
    color: white; 
 
    background: linear-gradient(to left,#006680, #00b8e6); 
 
    padding: 0.5% 2% 0.5% 2%; 
 
    border: 1px solid black; 
 
} 
 

 
.tab:hover { 
 
    text-decoration: underline; 
 
}

<div class="tabs"> 
 
<a href="#" class="tab">tab1</a> 
 
<a href="#" class="tab">tab2</a> 
 
<a href="#" class="tab">tab3</a> 
 
<a href="#" class="tab">tab4</a> 
 
<a href="#" class="tab">tab5</a> 
 
<a href="#" class="tab">tab6</a> 
 
</div>

Answer 1

auf den Kommentar zu erstellen, können Sie versuchen, etwas Magie zu arbeiten mit einem Elternteil Hintergrund durch alle diese Links gehen zu müssen, oder Sie können einfach eine andere Steigung für jeden schreiben, dass hat alle Haltepunkte.

.tab:nth-of-type(1) { 
    background: linear-gradient(to left,#00ACD7,#00B8E6); 
} 
.tab:nth-of-type(2) { 
    background: linear-gradient(to left,#00A1C9,#00ACD7); 
} 
.tab:nth-of-type(3) { 
    background: linear-gradient(to left,#0095BA,#00A1C9); 
} 
.tab:nth-of-type(4) { 
    background: linear-gradient(to left,#0089AC,#0095BA); 
} 
.tab:nth-of-type(5) { 
    background: linear-gradient(to left,#007D9D,#0089AC); 
} 
.tab:nth-of-type(6) { 
    background: linear-gradient(to left,#00728F,#007D9D); 
} 

Sie könnten wahrscheinlich diese etwas von Sass erzeugt werden haben eine Farbfunktion und einer for-Schleife, aber ich bin mir nicht sicher, wie bestimmte Sie in der Lage sein würden zu sein.

https://jsfiddle.net/m61es0rv/

btw bekam ich jede Steigung Punkt von hier https://meyerweb.com/eric/tools/color-blend/#006680:00B8E6:6:hex

Answer 2

Hier ist, was ich kam mit:

Wenn Sie einen einzelnen Gradienten verwenden möchten, Sie gehen zu den Gradienten auf das übergeordnete Element zu haben, zu geben und gehen aus Dort. Ich tat genau das und fügte einige Span-Elemente hinzu, um die Knöpfe mit der grauen Hintergrundfarbe zu trennen, die Sie wählten.

Die andere Option, wie Sergey zu Recht erklärte, wäre, den Gradienten zu hacken und verschiedene Gradienten auf jeden Block einzeln zu setzen.

body{ 
 
     background: lightgray; 
 
} 
 

 
.tabs{ 
 
    background: linear-gradient(to left,#006680, #00b8e6); 
 
    display: flex; 
 
} 
 

 
.tab { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    padding: 0.5% 2% 0.5% 2%; 
 
} 
 

 
.tab:hover { 
 
    text-decoration: underline; 
 
} 
 

 
.separator { 
 
display: inline-block; 
 
width:10px; 
 
background: lightgray; 
 
}

<div class="tabs"> 
 
<a href="#" class="tab">tab1</a> 
 
<span class="separator"></span> 
 
<a href="#" class="tab">tab2</a> 
 
<span class="separator"></span> 
 
<a href="#" class="tab">tab3</a> 
 
<span class="separator"></span> 
 
<a href="#" class="tab">tab4</a> 
 
<span class="separator"></span> 
 
<a href="#" class="tab">tab5</a> 
 
<span class="separator"></span> 
 
<a href="#" class="tab">tab6</a> 
 
<span class="separator"></span> 
 
</div>