Sind Farbverläufe neu in CSS3?

Gradient ist ein neuer Bildtyp in CSS3, der zum Ersetzen von Bildern verwendet wird. CSS3 definiert zwei Arten von Farbverläufen: 1. Linearer Farbverlauf, definiert mit der Funktion „linear-gradient()“ 2. Radialer Farbverlauf, definiert mit der Funktion „radial-gradient()“;

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Als neues Attribut von CSS3 haben Farbverläufe auch endloses Potenzial.

1. Einführung

 Gradient ist ein neuer Bildtyp in CSS3, der zum Ersetzen von Bildern verwendet wird:

• Beschleunigen Sie die Ladegeschwindigkeit von Seiten und reduzieren Sie die Bandbreitennutzung.

• CSS3 definiert zwei Arten von Gradienten:

lineare Gradienten - Down/Up/Links/rechts/diagonal

• Radial Gradientengradienten) - definiert durch ihre Zentren

• 2. Lineare Gradienten

Tatsächlich ist die Verwendung von Farbverläufen auch weit verbreitet, beispielsweise in Navigationsleisten:

background-image: linear-gradient(90deg,#0af,#0085ff)

   Offensichtlich sieht das viel besser aus als ein einfarbiger Hintergrund.

  Natürlich brauchen wir manchmal keine Übergangseffekte:

    background-image: linear-gradient(90deg,blue 100px,#FFF 100px,#FFF 200px,red 200px);

  Für lineare Verläufe gibt es neben linearen Verläufen auch sich wiederholende lineare Verläufe:

    $c1: #fff;
    $c2: #DF5646;
    $c3: #1C78A4;
    background-image: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 40px, $c1 40px, $c1 50px, $c3 50px, $c3 80px);

   Es ist ersichtlich, dass Verläufe nicht so einfach sind .

 Manche Leute müssen sich hier fragen, welche anderen Tricks können gespielt werden? Zunächst müssen wir verstehen, dass der Farbverlauf eine Art Bild ist. Anschließend müssen wir darüber nachdenken, welche anderen CSS-Eigenschaften mit Bildern verwendet werden.

    $color: #122556;
    background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%),
                      linear-gradient(-45deg, $color 25%, transparent 25%, transparent 75%, $color 75%);
    background-size: 30px 30px;

  Durch dieses Beispiel wird die Idee der Verwendung von Farbverläufen offener. Hier gibt es jedoch noch etwas zu beachten:

Wenn Sie mehrere Farbverläufe deklarieren, ist der zuerst deklarierte Farbverlauf näher am Benutzer. (Hier müssen wir das Problem der Abdeckung berücksichtigen und im Allgemeinen transparent verwenden).

Um einen radialen Farbverlauf zu erstellen, müssen Sie außerdem mindestens zwei Farbknoten definieren. Der Farbknoten ist die Farbe, die einen sanften Übergang darstellen soll. Gleichzeitig können Sie auch den Mittelpunkt, die Form (Kreis oder Oval) und die Größe des Farbverlaufs festlegen. Standardmäßig ist die Mitte des Farbverlaufs „Mitte“ (d. h. am Mittelpunkt), die Form des Farbverlaufs ist eine Ellipse (d. h. eine Ellipse) und die Größe des Farbverlaufs ist „am weitesten entfernte Ecke“ (d. h. bis zur äußersten Ecke).
• Syntax

    @mixin menuaction($color) {
        background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom / 100% 10%;
        &:hover {
            background-size: 100% 100%;
            color: #fff;
        }
    }

Wert

Beschreibung

FormBestimmt die Art des Kreises:Nächste Ecke: Geben Sie die Radiuslänge von an der radiale Verlauf vom Mittelpunkt des Kreises zur Ecke, die dem Mittelpunkt am nächsten liegt

Ellipse (Standard): Gibt den radialen Verlauf der Ellipse an.	circle: Geben Sie den radialen Verlauf des Kreises an.
	size Definieren Sie die Größe des Verlaufs, mögliche Werte: farthest-corner (Standard): Geben Sie die Radiuslänge des radialen Verlaufs vom Mittelpunkt an des Kreises zum Mittelpunkt des Kreises Die am weitesten entfernte Ecke Nächste Seite: Geben Sie die Radiuslänge des radialen Farbverlaufs vom Mittelpunkt des Kreises zur Seite an, die dem Mittelpunkt am nächsten liegt.
am weitesten entfernte Seite: Geben Sie die Radiuslänge des radialen Verlaufs an, um die Position des Verlaufs vom Mittelpunkt des Kreises zur Seite zu definieren, die am weitesten vom Mittelpunkt entfernt ist . Mögliche Werte:	center (Standard): Legen Sie den mittleren Ordinatenwert der Mitte des radialen Verlaufskreises fest. top : Legen Sie die Oberseite als Ordinatenwert der Mitte des radialen Verlaufskreises fest. unten : Stellen Sie den Boden auf den Ordinatenwert der Mitte des radialen Verlaufskreises ein.
	start-color, ..., last-color wird verwendet, um die Start- und Endfarben des Farbverlaufs anzugeben. Beispiel: background-image: radial-gradient(shape size at position, start-color, ..., last-color); IV. (Lernvideo-Sharing: CSS-Video-Tutorial )

Das obige ist der detaillierte Inhalt vonSind Farbverläufe neu in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!