Den praktischen Wert der CSS-Eigenschaft *-gradient erkunden

Lassen Sie mich zunächst eine interessante Eigenschaft vorstellen - conic-gradient

Konischer Verlauf !

Mein Interesse daran wurde geweckt, weil ich entdeckte, dass man damit Kreisdiagramme erstellen kann!
Zum Beispiel:

So was:

Auch das Prinzip ist ganz einfach: Man nimmt den Startpunkt als Mittelpunkt und bewegt sich dann im Uhrzeigersinn um den Mittelpunkt herum, um einen Verlaufseffekt zu erzielen. Es muss mehrere Farbwertparameter akzeptieren, denen jeweils zwei Prozentwerte folgen können, die die Start- und Endpunkte des aktuellen Farbwerts darstellen (durch Leerzeichen getrennt):

Hintergrund: Kegelverlauf (Rosa 0 – 30 %, Gelb 0 – 70 %, Hellgrün 0 – 100 %);

Sie können es auch separat schreiben:

Hintergrund: konischer Farbverlauf (Rosa 0, Rosa 30 %, Gelb 30 %, Gelb 70 %, Hellgrün 70 %, Hellgrün 100 %);

(Die zweite Methode hat eine bessere Kompatibilität als die erste)

Warten! Ist das zweite Bild oben nicht das, was wir wollen?
Aus der Abbildung lässt sich unschwer folgender Code ableiten:

{
    Breite: 200px;
    Höhe: 200px;
    Hintergrund: konischer Farbverlauf (Dunkelpink 0, Dunkelpink 30 %, Gelbgrün 30 %, Gelbgrün 70 %, Blaugrün 70 %, Blaugrün 100 %);
    Randradius: 50 %;
}

Allerdings ist es hier völlig „statisch“.

Die meisten von uns haben wahrscheinlich echarts zum Zeichnen von Grafiken verwendet: Indem wir die Daten aus dem Backend in die angegebenen Parameter (Array) des echarts-Map-Objekts rendern, können wir ein Kreisdiagramm mit verschiedenen Farben erhalten, das den Anforderungen entspricht. Wie macht man das mit CSS?

Natürlich brauchen wir dabei die Hilfe von JS – denn CSS3 führt benutzerdefinierte Variablen ein, die CSS-Eigenschaften gut mit JavaScript-Variablen kombinieren können:
Nach der Untersuchung sollte die derzeit bessere Vorgehensweise darin bestehen, die Start- und Endpositionen der Verlaufsfarbe als benutzerdefinierte Variablen festzulegen. Wenn JavaScript dann die Daten erhält, kann es deren Wert ändern, um die Farbverteilung im Kreisdiagramm zu ändern!

Hier ist eine Demo, die ich zuvor geschrieben habe:

:Wurzel{
	--Null:0;
	--eins:50%;
}
.Kreis{
	Breite: 300px;
	Höhe: 300px;
	Randradius: 50 %;
	/* Hintergrund: konischer Farbverlauf (rot, gelb, limettengrün, aquamarin, blau, pink, rot); */
	Hintergrund: Kegelschnitt-Farbverlauf (rot var(--null) var(--eins), gelb var(--eins) 100 %);
}

<div Klasse="Kreis"></div>
<button id="but">Klicken Sie hier, um die Kreisdiagrammverteilung zu ändern</button>
<Skript>
	aber.onclick=function(){
		document.documentElement.style.setProperty('--zero', '10%');
		document.documentElement.style.setProperty('--one', '70%');
	}
</Skript>

Wenn Sie Farbwerte dynamisch hinzufügen möchten (z. B. neue Umfragethemen hinzufügen), können Sie die Attribute im Stil dynamisch ändern:

xxx.style.xxx="xxx"; //Ändern

Dies ist viel einfacher zu implementieren als die Verwendung des „ ::after Pseudoelements“!

Viele Leute haben möglicherweise die Pseudoelementmethode verwendet: Verwenden der Rotate-Eigenschaft von Transform, um ein Inhaltsfeld zu drehen und einen Teil davon anzuzeigen, um das Ziel zu erreichen.

Es gibt noch viele andere „sexy Operationen“, die man durch eine Suche im Internet finden kann, daher werde ich hier nicht näher darauf eingehen (verglichen mit der „Gleichgültigkeit“ des Browsers gegenüber dieser Eigenschaft in den letzten zwei Jahren bis hin zur aktuellen teilweisen Unterstützung ist dies ebenfalls ein großer Fortschritt, freuen wir uns weiterhin darauf)

Über linear-gradient

Dieses Attribut scheint nicht viel zu bieten, außer dass es auf einigen Websites als Hintergrund für ein Element verwendet werden kann:
Wie gestreifter Hintergrund
„Wenn mehrere Farbstopps die gleiche Position haben, entsteht ein infinitesimal kleiner Übergangsbereich.
Der Übergang beginnt und endet jeweils beim ersten und letzten angegebenen Wert. Tatsächlich ändert sich die Farbe an dieser Stelle abrupt und nicht in einem gleichmäßigen Farbverlauf. ”
Da ein Farbverlauf ein durch Code generiertes Bild ist, können wir ihn wie jedes andere Hintergrundbild behandeln und seine Größe mit „background-size“ anpassen. Und da Hintergründe standardmäßig gekachelt sind, ist der gesamte Container tatsächlich mit horizontalen Streifen gefüllt:

Hintergrund: linearer Farbverlauf (#fb3 50 %, #58a 50 %);
Hintergrundgröße: 100 % 30px; 

Vertikale Streifen <br /> Der Code für vertikale Streifen ist fast identisch mit dem für horizontale Streifen. Der Hauptunterschied besteht darin, dass wir am Anfang einen zusätzlichen Parameter hinzufügen müssen, um die Richtung des Farbverlaufs anzugeben. Im Code für horizontale Streifen können wir diesen Parameter tatsächlich hinzufügen, aber sein Standardwert „unten“ entspricht unserer Absicht und wird daher weggelassen. Schließlich müssen wir auch den Wert für die Hintergrundgröße invertieren:

Hintergrund: linearer Farbverlauf (nach rechts, #fb3 50 %, #58a 0);
Hintergrundgröße: 30px 100 %;

Es ist zu beachten, dass, wenn der erste Parameter zu linear-gradient hinzugefügt wird, seine Standardrichtung „von unten nach oben“ wird. Aus diesem Grund hat der Autor auch eine E-Mail an Novice Tutorial gesendet, um vorzuschlagen, den Wortlaut im Dokument zu ändern.

Schräge Streifen
Mit der „herkömmlichen“ Methode, bei der lediglich der erste Parameter des linearen Farbverlaufs – der Winkelwert – geändert wird, oder die „Präzision“ über die Hintergrundgröße erhöht wird, lässt sich kein wirklich perfekt geneigter Hintergrund erzielen: Bei einer Größen- oder Neigungsänderung wird immer das gesamte Muster durcheinandergebracht!
Glücklicherweise gibt es bessere Möglichkeiten, diagonale Streifen zu erstellen: Wenig bekannt ist die Tatsache, dass sowohl linear-gradient() als auch radial-gradient() jeweils eine Schleifenversion haben: repeating-linear-gradient() und repeating-radial-gradient().
Sie funktionieren ähnlich wie die beiden vorherigen, mit einem Unterschied: Die Farbskala wird in einer Endlosschleife wiederholt, bis der gesamte Hintergrund ausgefüllt ist!

Hintergrund: sich wiederholender linearer Farbverlauf (45 Grad, #fb3, #58a 30px); 

Ach ja, übrigens, genau wie oben haben alle „-gradient“-Eigenschaften einen „Gradienten-Halo“, wenn es keine Einschränkungen für die Start- und Endpositionen gibt. Wenn wir es wie folgt ändern:

Hintergrund: sich wiederholender linearer Farbverlauf (60 Grad, #fb3 0 15px, #58a 0 30px); 

Denken Sie beim Anblick dieses Bildes an einen berühmten Fall – das Dreieck?

Hintergrund: #eee;
Hintergrundbild: linearer Farbverlauf (45 Grad, transparent 75 %, #bbb 0);

Früher haben wir CSS folgendermaßen geschrieben:

Breite: 0;
Höhe: 0;
Rand: 50px durchgehend transparent;
Farbe der oberen Umrandung: schwarz;

Tatsächlich ist ein linearer Gradient viel nützlicher als dies ...

Aktualisiert am 17.10.2020

Radialgradient und Flächenauftrag

Wir alle wissen wahrscheinlich, dass eine Bildlaufleiste ein gängiges Schnittstellensteuerelement ist, das verwendet wird, um anzuzeigen, dass ein Element neben dem sichtbaren Inhalt weiteren Inhalt enthält. Da dies jedoch häufig zu umständlich und optisch störend war, wurden bei modernen Betriebssystemen die Darstellungen vereinfacht, indem die Bildlaufleiste vollständig ausgeblendet wird, wenn der Benutzer nicht mit dem scrollbaren Element interagiert.
Die derzeit am häufigsten verwendete Methode zum „Entfernen der Bildlaufleiste“ ist: ::-webkit-scrollbar{display:none;} . Sie kann aber offensichtlich nicht im Internet Explorer verwendet werden – sie ermöglicht lediglich das Ändern der Farbe der Bildlaufleiste.

Im Zeitalter von CSS3 können wir eine Div-Ebene um die Stelle legen, an der wir eine Bildlaufleiste hinzufügen möchten, dafür overflow:hidden festlegen und mit calc() die Breite dynamisch berechnen, um einen Überlauf zu erzielen! Dadurch können Kompatibilitätsprobleme unter IE effektiv gelöst werden.

Wir verwenden Bildlaufleisten heute kaum noch zum Scrollen von Seiten (öfter verwenden wir Touch-Gesten), aber Bildlaufleisten sind immer noch sehr nützlich, um anzuzeigen, dass Elementinhalte gescrollt werden können, selbst bei nicht interaktiven Elementen. Und diese Eingabeaufforderungsmethode ist sehr clever.
Es wird gesagt, dass Google einst einen RSS-Reader auf den Markt brachte (den es inzwischen nicht mehr gibt) und die User-Experience-Designer von Google eine sehr elegante Möglichkeit fanden, ähnliche Eingabeaufforderungen zu erstellen: Wenn sich im Seitenleisten-Container mehr Inhalt befindet, wird am oberen und unteren Rand des Containers ein leichter Schatten angezeigt. So was:

Beginnen wir mit einer einfachen Struktur, einer einfachen ungeordneten Liste mit einigen Beispielinhalten:

<ul>
	<li>Ada Catlace</li>
	<li>Alan Schnurren</li>
	<li>Schrödingkatze</li>
	<li>Tim Purrners-Lee</li>
	<li>WebKitty</li>
	<li>Json</li>
	<li>Ungültig</li>
	<li>Neko</li>
	<li>Keine Angabe</li>
	<li>Kat.5</li>
	<li>Vektor</li>
	<li>Ada Catlace</li>
	<li>Alan Schnurren</li>
	<li>Schrödingkatze</li>
	<li>Tim Purrners-Lee</li>
	<li>WebKitty</li>
	<li>Json</li>
	<li>Ungültig</li>
	<li>Neko</li>
	<li>Keine Angabe</li>
	<li>Kat.5</li>
	<li>Vektor</li>
	<li>Ada Catlace</li>
	<li>Alan Schnurren</li>
	<li>Schrödingkatze</li>
	<li>Tim Purrners-Lee</li>
	<li>WebKitty</li>
	<li>Json</li>
	<li>Ungültig</li>
	<li>Neko</li>
	<li>Keine Angabe</li>
	<li>Kat.5</li>
	<li>Vektor</li>
	<li>Ada Catlace</li>
	<li>Alan Schnurren</li>
	<li>Schrödingkatze</li>
	<li>Tim Purrners-Lee</li>
	<li>WebKitty</li>
	<li>Json</li>
	<li>Ungültig</li>
	<li>Neko</li>
	<li>Keine Angabe</li>
	<li>Kat.5</li>
	<li>Vektor</li>
</ul>

Wir können einige grundlegende Stile für das <ul> -Element festlegen, um seine Höhe etwas geringer als seinen Inhalt zu machen und so ein Scrollen des Inhalts zu ermöglichen:

Überlauf: automatisch;
Breite: 10em;
Höhe: 8em;
Polsterung: .3em .5em;
Rand: 1px massives Silber;

Als nächstes wird etwas Interessantes passieren. Wir fügen oben mithilfe eines radialen Farbverlaufs einen Schatten hinzu:

Hintergrund: radialer Farbverlauf (oben, rgba (0,0,0, 0,2), transparent 70 %), keine Wiederholung;
Hintergrundgröße: 100 % 15px;

Wenn wir jetzt durch die Liste scrollen, bleibt dieser Schatten an derselben Position. Dies ist genau das Standardverhalten eines Hintergrundbilds: Seine Position ist relativ zum Element festgelegt! Ob der Inhalt des Elements gescrollt wurde oder nicht. Dies gilt auch für Hintergrundbilder mit background-attachment: fixed . Der einzige Unterschied zwischen ihnen besteht darin, dass Letzteres beim Scrollen der Seite relativ zum Ansichtsfenster fixiert ist. Gibt es eine Möglichkeit, das Hintergrundbild zusammen mit dem Inhalt des Elements scrollen zu lassen?

Jetzt sind die gemeinsamen Werte nur inherit , scroll und fixed , aber aus dem W3C-Dokument können wir ersehen, dass background-attachment ein neues Schlüsselwort namens local hinzugefügt wurde!
Wenn wir diese Eigenschaft auf den Schatten anwenden, haben wir genau den gegenteiligen Effekt: Wenn wir ganz nach oben scrollen, können wir einen Schatten sehen; wenn wir jedoch nach unten scrollen, verschwindet der Schatten.

Aber egal, wir haben die richtige Idee!

Mir ist ein sehr gängiger Hack eingefallen: Wir brauchen zwei Hintergrundebenen: Eine wird zum Erzeugen des Schattens verwendet und die andere ist im Grunde ein weißes Rechteck, das zum Abdecken des Schattens verwendet wird und wie eine Maskenebene fungiert. Die Hintergrundebene, die den Schatten erzeugt, verfügt über den Standardwert background-attachment (Scrollen), da sie immer an ihrem Platz bleiben soll. Wir setzen die background-attachment -Eigenschaft des Maskenhintergrunds auf „lokal“, sodass sie den Schatten abdeckt, wenn wir nach oben scrollen, und mitrollt, wenn wir nach unten scrollen, wodurch der Schatten sichtbar wird.

Hintergrund: linearer Farbverlauf (weiß 30 %, transparent),
 			radialer Farbverlauf (bei 50 % 0, rgba (0,0,0, 0,2), transparent 70 %);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 100 % 50px, 100 % 15px;
Hintergrundanhang: lokal, scrollen;

Das stimmt, dies ist eine weitere Anwendung eines linearen Farbverlaufs – der Farbverlaufsmaskenebene!

Doch nun stellen wir fest: Jetzt gibt es nur noch den oberen Teil, was sollen wir mit dem unteren machen?
Dies erfordert die Verwendung von „Abkürzungen“ in CSS und ein Verständnis von *-gradient : Wenn der erste Parameter nicht hinzugefügt wird (keine Richtung angegeben ist), ist der Farbverlauf standardmäßig von oben nach unten. Wenn der erste Parameter jedoch hinzugefügt wird, aber to bottom oder 100% nicht angegeben sind, ist der Farbverlauf standardmäßig von unten nach oben.

Hintergrund: linearer Farbverlauf (weiß 30 %, transparent) oben / 100 % 50 Pixel,
	radial-gradient(bei 50% 0, rgba(0,0,0,.2),transparent 72%) oben / 100% 15px,
	linearer Farbverlauf (nach oben, weiß 15px, hsla (0,0%, 100%, 0)) unten / 100% 50px,
 	radialer Farbverlauf (unten, rgba (0,0,0, 0,2), transparent 72 %) unten / 100 % 15 Pixel;
Hintergrundwiederholung: keine Wiederholung;
Hintergrundanhang: lokal, scrollen, lokal, scrollen;

Damit ist dieser Artikel über die Erforschung des praktischen Werts des CSS-Attributs *-gradient abgeschlossen. Weitere Informationen zum CSS-Attribut gradient finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!