Kann CSS auf diese Weise verwendet werden? Die Kunst wunderlicher Farbverläufe

Im vorherigen Artikel – Der Charme einer Zeile CSS-Code – haben wir einen schönen (vielleicht ist seltsam passender) Hintergrund vorgestellt, der mit nur einer Zeile CSS-Code generiert werden kann.

In diesem Artikel werden wir weiterhin einige interessante Erkenntnisse zum Hintergrund vorstellen. Durch die Verwendung einiger sehr kleiner Einheiten können wir mit nur wenigen Codezeilen schöne und interessante Hintergrundeffekte erzeugen.

Der Einfluss der Magnitude auf Hintergrundgrafiken

Die Hauptfiguren dieses Artikels sind:

• Wiederholender radialer Farbverlauf
• Sich wiederholender konischer Farbverlauf

Wie ist die Größenordnung der Hintergrundgrafik? Schauen wir uns ein interessantes Phänomen an:

Wir verwenden sich repeating-conic-gradient mit mehreren Winkelgradienten, um eine Grafik zu implementieren. Der Code ist sehr einfach, wie unten gezeigt:

<div></div>
div {
    Breite: 100vw;
    Höhe: 100vh;
    Hintergrund: sich wiederholender konischer Farbverlauf (#fff, #000, #fff 30 Grad);
} 

Ersetzen Sie 30deg durch 0.1deg

Dann ersetzen wir 30deg im obigen Code durch einen sehr kleinen Wert, ähnlich diesem:

{
    Hintergrund: sich wiederholender konischer Farbverlauf (#fff, #000, #fff 0,1 Grad);
}

Was ist das? Überlegen Sie, wie die von dieser Codezeile gezeichnete Grafik aussehen wird.

Sehen Sie die Wirkung:

Wow, unglaublich. 0.1deg sind hier sehr kritisch. Je kleiner der Winkel hier ist (am besten weniger als 1 Grad), desto kühler wird die Grafik. Das ist, was wir als Größenordnungsauswirkung auf Hintergrundgrafiken bezeichnen.

CodePen – Einzeiliges CSS-Muster

Beobachten Sie Änderungen mit CSS @property

Wenn wir zuvor den folgenden Übergangscode direkt geschrieben hätten, hätten wir nicht die interpolierte Übergangsanimation erhalten, sondern nur die Einzelbildanimation:

div{
    Hintergrund: sich wiederholender konischer Farbverlauf (#fff, #000, #fff 0,1 Grad);
    Übergang: Hintergrund 1s;
}

div:hover {
    Hintergrund: sich wiederholender konischer Farbverlauf (#fff, #000, #fff 30 Grad);
}

Der einzige Effekt, den Sie erzielen können, ist dieser, da CSS keine direkte Übergangsanimation für so komplexe Farbverläufe unterstützt:

OK, als Nächstes können wir mithilfe der in diesem Artikel vorgestellten Kenntnisse zu CSS @property – CSS @property macht das Unmögliche möglich – CSS @property verwenden, um den Prozess seiner beiden Statusänderungen zu beobachten.

Transformieren Sie einfach den Code. Der Kerncode lautet wie folgt:

@Eigenschaft --Winkel {
  Syntax: '<Winkel>';
  erbt: falsch;
  Anfangswert: 0,1 Grad;
}
div{
    Hintergrund: sich wiederholender konischer Farbverlauf (#fff, #000, #fff var (--Winkel));
    Übergang: --Winkel 2s;
}
html:hover {
    --Winkel: 30 Grad;
} 

Wow, um die Auswirkungen von Einheiten unterschiedlicher Größenordnungen auf diese Grafik zu ermitteln, habe ich versehentlich einen magischen Übergangsanimationseffekt erhalten. Es wird dringend empfohlen, auf DEMO zu klicken, um die Wirkung der Konvertierung zu erleben:

CodePen – repeating-conic-gradient CSS-Musterübergang (Nur Chrome 85+)

Durch die durch CSS @property realisierte Interpolationsübergangsanimation können wir beim Betrachten des Änderungsprozesses von 30deg auf 0.1deg ungefähr erkennen, wie sich die kleine Einheit 0.1deg auf die Grafik auswirkt.

Gleichzeitig gilt: Je kleiner diese Einheit ist, desto detailreicher wird das Bild. Sie können es selbst ausprobieren, um die Details zu erfahren.

Mehrere radiale Farbverläufe und mehrere Winkelfarbverläufe mit kleinen Einheiten zum Erstellen interessanter Hintergründe

Mit den oben genannten Tipps können wir durch die Verwendung von sich wiederholenden radialen Farbverläufen und sich wiederholenden konischen Farbverläufen einige sehr interessante Hintergrundbilder erzeugen.

Um nur einige aufzulisten:

div {
    Hintergrundbild: sich wiederholender radialer Farbverlauf(
        Kreis in der Mitte Mitte,
        rgb(241, 43, 239),
        rgb(239, 246, 244) 3px
    );
} 

div {
    Hintergrundbild: sich wiederholender radialer Farbverlauf(
        Kreis bei 15% 30%,
        rgb(4, 4, 0),
        rgb(52, 72, 197),
        rgb(115, 252, 224),
        rgb(116, 71, 5),
        rgb(223, 46, 169),
        rgb(0, 160, 56),
        rgb(234, 255, 0) 2px
    );
} 

div {
    Hintergrundbild: sich wiederholender radialer Farbverlauf(
        Kreis in der Mitte Mitte,
        rgb(81, 9, 72),
        rgb(72, 90, 223),
        rgb(80, 0, 34),
        rgb(34, 134, 255),
        rgb(65, 217, 176),
        rgb(241, 15, 15),
        rgb(148, 213, 118) 0,1px
    );
} 

div {
    Hintergrundbild: sich wiederholender radialer Farbverlauf(
        Ellipse in der Mitte,
        rgb(75, 154, 242),
        rgb(64, 135, 228),
        rgb(54, 117, 214),
        rgb(43, 98, 200),
        rgb(33, 79, 185),
        rgb(22, 60, 171),
        rgb(12, 42, 157),
        rgb(1, 23, 143) 0,01px
    );
} 

Hey, ist das nicht interessant? Sie können selbst noch mehr interessante Grafiken ausprobieren. Den vollständigen DEMO-Code können Sie hier einsehen:

CodePen-Demo – Magische Farbverlaufskunst

Wie klein kann es sein?

repeating-radial-gradient Es ähnelt radial-gradient() und verwendet die gleichen Parameter, wiederholt die Farbe jedoch in alle Richtungen, um den gesamten Container abzudecken.

Nehmen Sie den folgenden Code als Beispiel. Der Endpunkt einer einzelnen Zeichnung 1px , worauf sich dieser Artikel konzentriert. Wie klein kann es sein?

:Wurzel {
    --Länge: 1px
}
{
    Hintergrundbild: sich wiederholender radialer Farbverlauf(
        Kreis bei 17% 32%,
        rgb(4, 4, 0),
        rgb(52, 72, 197),
        rgb(115, 252, 224),
        rgb(116, 71, 5),
        rgb(223, 46, 169),
        rgb(0, 160, 56),
        rgb(234, 255, 0) var(--Länge)
    );
}

Ich habe zum Vergleich 8 Grafiken von 100px bis 0.00001px gezeichnet:

Im Bereich von 0.001px bis 0.0001px ist die Grafik im Grunde zu einer Partikelgrafik verkommen, und der radiale Verlaufsumriss ist nicht mehr zu sehen. Auf der Ebene von 0.00001px ist es tatsächlich zu einem Vollfarbbild verkommen!

CodePen-Demo – Die Auswirkung unterschiedlicher Längeneinheiten auf sich wiederholende radiale Gradientengrafiken

Verwenden eines sich wiederholenden radialen Gradienten zur Implementierung einer TV-Schneerauschen-Animation

In der obigen DEMO haben wir festgestellt, dass repeating-radial-gradient im Bereich von 0.001px bis 0.0001px im Wesentlichen zu einer Partikelform degeneriert:

{
    Hintergrundbild: sich wiederholender radialer Farbverlauf(
        Kreis bei 17% 32%,
        rgb(4, 4, 0),
        rgb(52, 72, 197),
        rgb(115, 252, 224),
        rgb(116, 71, 5),
        rgb(223, 46, 169),
        rgb(0, 160, 56),
        rgb(234, 255, 0) 0,0008px
    );
} 

Ist das nicht dem Effekt einer Schneefläche im Fernsehen sehr ähnlich? Durch Feinabstimmung des Parameters von 0.0008px und Verwendung einiger Frames unterschiedlicher Animationen können wir die Animation des Fernsehschneerauschens erhalten.

Ahaha, sehr interessant, den kompletten Source-Code könnt ihr hier einsehen:

Copepen-Demo – PURER CSS-TV-RAUSCHEFFEKT (Nur Chrome 85+)

endlich

Was können ein paar Zeilen Hintergrundcode bewirken? Natürlich steckt noch mehr dahinter, aber das ist der Spaß an CSS. Wenn Sie die interessantesten CSS-Informationen erhalten möchten, verpassen Sie nicht meinen öffentlichen iCSS-Account - iCSS-Frontend-Spaß

Nun, dieser Artikel endet hier, ich hoffe, er hilft Ihnen 😃

Weitere wunderbare technische CSS-Artikel sind in meinem Github – iCSS – gesammelt. Sie werden ständig aktualisiert. Klicken Sie einfach auf einen Stern, um sich anzumelden und zu sammeln.

Kann dieser Artikel über CSS bisher wie folgt wiedergegeben werden? Dies ist das Ende des Artikels über die Kunst fantasievoller Farbverläufe. Weitere relevante CSS-Farbverlaufsinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!