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!