Während Sie nicht suchten, wurden CSS -Gradienten besser

Verbesserungen an CSS -Gradienten: Doppelpositionssyntax vereinfacht Gradientenstreifen

In der Liste von Lea Verou's Conicgradient () Polyfill-Funktionen befindet sich meine Aufmerksamkeit:

Unterstützt die Dual -Positions -Syntax (derselbe Farbstopppunkt verwendet zwei Positionen als Verknüpfung für zwei aufeinanderfolgende Farbstopppunkte mit derselben Farbe)

Überraschenderweise habe ich kürzlich festgestellt, dass die meisten Menschen nicht einmal wissen, dass die Zwei-Positionen-Syntax von Gradientenstopppunkten tatsächlich in der Spezifikation vorhanden ist, und habe mich entschlossen, einen Artikel darüber zu schreiben.

Nach der Spezifikation:

Wenn Sie zwei Positionen angeben, erleichtert es, feste Farbstreifen in einem Gradienten zu erstellen, ohne die Farbe zweimal wiederholen zu müssen.

Ich stimme voll und ganz zu, dass dies das erste ist, was mir in den Sinn kommt, wenn ich diese Funktion verstehe.

Angenommen, wir wollen das folgende Ergebnis erzielen: Ein Gradienten mit vielen vertikalen Streifen mit gleicher Breite (ich habe es aus Chris 'vorheriger Beitrag erhalten):

Die Hexadezimalwerte sind: #5461C8, #C724B1, #E4002B, #FF6900, #F6BE00, #97D700, #00AB84 und #00A3E0.

Schauen wir uns zunächst an, wie dies mit CSS erreicht werden kann, ohne die Doppelstop -Punktposition zu verwenden!

Wir haben acht Streifen, von denen jede ein Achtel der Gradientenbreite ausmacht. Ein Achtel von 100% beträgt 12,5%, daher wechseln wir von einem Streifen zum nächsten bei Vielfachen dieses Wertes.

Dies bedeutet, dass unser linearer Gradient () so aussieht:

 <code>linear-gradient(90deg, #5461c8 12.5% /* 1*12.5% */, #c724b1 0, #c724b1 25% /* 2*12.5% */, #e4002b 0, #e4002b 37.5% /* 3*12.5% */, #ff6900 0, #ff6900 50% /* 4*12.5% */, #f6be00 0, #f6be00 62.5% /* 5*12.5% */, #97d700 0, #97d700 75% /* 6*12.5% */, #00ab84 0, #00ab84 87.5% /* 7*12.5% */, #00a3e0 0)</code>

Beachten Sie, dass wir den prozentualen Wert der Stoppposition nicht wiederholen müssen, da wir automatisch einen scharfen Übergang durchführen, wenn die Stoppposition kleiner als die vorherige Position ist. Aus diesem Grund ist es immer möglich, 0 zu verwenden (es ist immer geringer als jeder positive Wert) und #C724B1 25%, #e4002b 0 anstelle von #c724b1 25%, #e4002b 25%, zum Beispiel. Wenn wir uns entscheiden, zwei Streifen hinzuzufügen und die Stoppposition auf ein Vielfaches von 10%einzustellen, kann dies unser Leben in Zukunft erleichtern.

Nicht schlecht, insbesondere im Vergleich zu dem Code, den Gradientengeneratoren normalerweise generieren. Wenn wir jedoch entscheiden, dass einer der Streifen in der Mitte nicht ganz zu den anderen Streifen passt, bedeutet es, dass er in etwas anderes geändert wird, dass er an zwei Stellen aktualisiert werden muss.

Auch dies ist kein großes Problem, wir können es ohne die Hilfe eines Präprozessors lösen:

 <code>$c: #5461c8 #c724b1 #e4002b #ff6900 #f6be00 #97d700 #00ab84 #00a3e0; @function get-stops($c-list) { $s-list: (); $n: length($c-list); $u: 100%/$n; @for $i from 1 to $n { $s-list: $s-list, nth($c-list, $i) $i*$u, nth($c-list, $i 1) 0 } @return $s-list } .strip { background: linear-gradient(90deg, get-stops($c))) }</code>

Dies erzeugt den genauen CSS -Gradienten, den wir zuvor gesehen haben, und jetzt müssen wir ihn jetzt nicht mehr an zwei Stellen ändern.

Codepen -Demo

Aber selbst wenn der Präprozessor uns daran hindert, dasselbe zweimal zu tippen, wird die Doppelarbeit im generierten Code nicht beseitigt.

Und wir möchten möglicherweise nicht immer Präprozessoren verwenden. Abgesehen von der Tatsache, dass manche Menschen hartnäckig sind oder irrationale Angst oder Hass gegen Präprozessoren haben, fühlt sich manchmal etwas albern an.

Zum Beispiel, wenn wir fast nichts zu schleifen haben! Angenommen, wir möchten ein einfacheres Hintergrundmuster wie ein diagonales Hash-Muster erhalten, das meiner Meinung nach häufiger als übertriebene Regenbogenmuster ist, die für die meisten Websites möglicherweise überhaupt nicht geeignet sind.

Dies erfordert die Verwendung von Wiederholungslinear-Gradient (), was bedeutet, dass selbst wenn wir keine sehr lange Liste von hexadezimalen Werten haben, wie wir es zuvor getan haben, eine gewisse Doppelarbeit erfordert:

 <code>repeating-linear-gradient(-45deg, #ccc /* can't skip this, repeating gradient won't work */, #ccc 2px, transparent 0, transparent 9px /* can't skip this either, tells where gradient repetition starts */)</code>

Hier können wir die ersten und letzten Stop-Punkte nicht verwerfen, da dies genau das gibt, was der Gradient innerhalb des durch Hintergrundgröße definierten Rechtecks ​​wiederholt.

Wenn Sie verstehen möchten, warum es besser ist, wiederholt-linear-Gradient () anstelle von einfach linear-Gradient () in Kombination mit einer geeigneten Hintergrundgröße, um diesen Hash zu erstellen, finden Sie einen weiteren Beitrag, den ich zuvor geschrieben habe.

Hier kommt diese Funktion ins Spiel - sie ermöglicht es uns, eine Doppelarbeit im endgültigen CSS -Code zu vermeiden.

Für den Fall Rainbow Stripe wird unser CSS:

 <code>linear-gradient(90deg, #5461c8 12.5%, #c724b1 0 25%, #e4002b 0 37.5%, #ff6900 0 50%, #f6be00 0 62.5%, #97d700 0 75%, #00ab84 0 87.5%, #00a3e0 0)</code>

Um den Hash neu zu erstellen, brauchen wir nur:

 <code>repeating-linear-gradient(-45deg, #ccc 0 2px, transparent 0 9px)</code>

Codepen -Demo

Wie ist die Unterstützungssituation? Sehr gut, Sie haben richtig gefragt! Es ist eigentlich sehr gut! Es funktioniert mit Safari, Chrombrowsern (Edge ist jetzt enthalten!) Und Firefox. Pre-Chromium Edge und einige mobile Browser sind möglicherweise noch in der Art und Weise, wie Sie es können. Wenn Sie sich jedoch nicht um die Unterstützung aller Browser kümmern müssen oder eine Fallback-Lösung in Ordnung ist, können Sie damit beginnen!

Das obige ist der detaillierte Inhalt vonWährend Sie nicht suchten, wurden CSS -Gradienten besser. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!