Lineare Gradienten von CSS3 [CSS3-Tipps]

Gradient ist eine großartige Farbfeature-Ergänzung in CSS3. Anstatt nur eine einzige Farbe hinzuzufügen, können wir jetzt mehrere Farbkombinationen in einem Deklarationsblock hinzufügen, ohne auf Bilder angewiesen zu sein. Dadurch kann die HTTP-Anforderung auf unserer Website verringert werden, sodass die Website schneller geladen wird.

Wenn Sie in CSS3 mit Farbverläufen herumgespielt haben, kennen Sie wahrscheinlich die beiden Methoden: radialer und linearer Farbverlauf. Im heutigen Beitrag geht es um Letzteres.

Verläufe erstellen

Da die Spezifikation sagt, dass Farbverläufe in CSS3 ein Bild sind, hat es keine besondere Eigenschaft wie andere neue Feature-Ergänzungen. Daher wird es mit dem deklariert Hintergrundbild stattdessen Eigentum.

Wenn wir uns die vollständige Syntax für gradient anschauen, sieht es ein bisschen aus überfüllt, was für manche Menschen zu Verwirrung führen kann.

 div Hintergrundbild: -webkit-linearer Gradient (oben, # FF5A00 0%, # FFAE00 100%); Hintergrundbild: -moz-linearer Gradient (oben, # FF5A00 0%, # FFAE00 100%); Hintergrundbild: -ms-linearer Gradient (oben, # FF5A00 0%, # FFAE00 100%); Hintergrundbild: -o-linearer Gradient (oben, # FF5A00 0%, # FFAE00 100%); Hintergrundbild: linearer Gradient (oben, # FF5A00 0%, # FFAE00 100%);

Lassen Sie uns also nach und nach in jeden Teil der Syntax einsteigen, um die Dinge klarer zu machen.

Zunächst wird der lineare Gradient mit der deklariert linearer Gradient () Funktion. Die Funktion hat drei Hauptwerte. Der erste Wert definiert die Startposition des Gradienten. Sie können ein beschreibendes Schlüsselwort verwenden, z oben um den Farbverlauf zu starten, der von oben;

 div Hintergrundbild: linearer Gradient (oben, # FF5A00, # FFAE00);

Das obige Snippet ist die offizielle Version von W3C zum Erstellen von Farbverläufen. Es ist eigentlich einfacher und ziemlich selbsterklärend und erzeugt auch den folgenden Farbverlauf.

Sie können auch verwenden Unterseite das Gegenteil tun oder Recht und links.

Wir können auch einen diagonalen Farbverlauf mit erstellen Winkelgrad als Startposition des Gradienten. Hier ist ein Beispiel:

 div Hintergrundbild: linearer Gradient (45 Grad, # FF5A00, # FFAE00);

Das obige Snippet erstellt den folgenden Farbverlauf:

Der zweite Wert der Funktion zeigt den Wert an erste Farbe Informationen und ihre Halteposition was in Prozent angegeben wird. Die Stoppposition ist tatsächlich optional. Der Browser ist klug genug, um die richtige Position zu bestimmen. Wenn Sie also nicht den ersten Farbstopp festlegen, nimmt der Browser dies an 0% als Standardeinstellung.

Und der nächste Wert ist der zweite Farbe Kombination. Es funktioniert wie der vorherige Wert, nur wenn es sich um die zuletzt angewendete Farbe handelt und wir die nicht angegeben haben Halteposition, ein Wert von 100% wird als Standard verwendet. Betrachten wir nun das folgende Beispiel:

 div Hintergrundbild: linearer Gradient (oben, # FF5A00 0%, # FFAE00 100%);

Das obige Snippet erstellt einen Farbverlauf wie zuvor (kein Unterschied), aber jetzt geben wir die Farbe der Stopposition an.

Jetzt ändern wir das Farbstopp, und diesmal werden wir angeben 50% für die erste farbe und 51% für die zweite Farbe und mal sehen, wie es sich herausstellt;

 div Hintergrundbild: linearer Gradient (oben, # FF5A00 50%, # FFAE00 51%);

Transparenz

Erstellen Transparenz In Gradienten ist auch möglich. Um den Effekt zu erzeugen, müssen wir die Farbe übersetzen verhexen in rgba Modus und senken Sie den Alphakanal.

 div Hintergrundbild: linearer Gradient (oben, rgba (255,90,0,0,2), rgb (255,174,0,0,2));

Das obige Snippet verringert die Farbintensität um 20%, und der Verlauf wird sich wie folgt entwickeln:

Mehrere Farben

Wenn Sie möchten, dass weitere Farben hinzugefügt werden, fügen Sie die Farben einfach mit einem Komma-Trennzeichen nebeneinander hinzu und lassen Sie den Browser die Stoppposition der Farben bestimmen.

 div Hintergrundbild: linearer Farbverlauf (oben, rot, orange, gelb, grün, blau, Indigo, Violett);

Das obige Snippet erstellt den folgenden Regenbogen.

Browser-Kompatibilität

Zum Zeitpunkt der Erstellung dieses Artikels haben leider alle aktuellen Browser die Standardsyntax noch nicht unterstützt. Sie benötigen immer noch das Herstellerpräfix (-Webkit-, -moz-, -Frau- und -O-). Deshalb erscheint die vollständige Syntax folgendermaßen:

 div Hintergrundbild: -webkit-linearer Gradient (oben, # FF5A00 0%, # FFAE00 100%); Hintergrundbild: -moz-linearer Gradient (oben, # FF5A00 0%, # FFAE00 100%); Hintergrundbild: -ms-linearer Gradient (oben, # FF5A00 0%, # FFAE00 100%); Hintergrundbild: -o-linearer Gradient (oben, # FF5A00 0%, # FFAE00 100%); Hintergrundbild: linearer Gradient (oben, # FF5A00 0%, # FFAE00 100%);

Auf der anderen Seite ist der Internet Explorer, insbesondere die Version 9 und niedriger, weit vom Standard entfernt. Die Steigung in IE9 und darunter wird mit deklariert Filter, Wenn wir also einen Farbverlauf in diesen Browsern hinzufügen möchten, müssen wir so etwas schreiben.

 div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);

Das Filter hat seine Grenzen: Erstens erlaubt es nicht mehr als drei hinzugefügte Farben, und das Erzeugen des Transparenzeffekts ist auch etwas knifflig - es erlaubt nicht rgba, aber der IE Filter Verwendet #ARGB;

 div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);

Hier ist ein Tool zum Konvertieren rgba zu #ARGB.

Demo
Quelle herunterladen

Syntax schneller schreiben

Wie Sie oben sehen können, müssen wir, um die Gradientenkompatibilität zwischen Browsern aufrechtzuerhalten, fünf weitere Codezeilen hinzufügen, was ineffizient ist.

Es gibt viele Möglichkeiten, die Aufgabe zu vereinfachen. B. die Verwendung des Präfix-freien, Präfix-, LESS- oder Sass-Codes, um die Codes zu kompilieren. Vor allem empfehlen wir jedoch die Verwendung dieses Tools ColorZilla Gradient. Dieses Tool generiert einfach alle erforderlichen Codes, damit die Farbverläufe in allen Browsern funktionieren.

Letzte Worte

Heute haben wir viel über das Erstellen von Farbverläufen diskutiert. Wir haben uns mit jedem Teil der Syntax beschäftigt, transparente Effekte erzeugt und die Browserkompatibilität aufrechterhalten. An dieser Stelle hoffen wir, dass Sie das Thema bereits besser verstehen.

Es gibt noch viele Dinge, die wir erforschen wollen CSS3-Farbverläufe Bleiben Sie in unseren zukünftigen Beiträgen auf Hongkiat.com. Vielen Dank, dass Sie diesen Beitrag gelesen haben. Wir hoffen, es hat Ihnen gefallen.

Lesen Sie weiter

Bullet Proof Cross Browser RGBA-Hintergründe - Lea Verou
CSS3 Image - W3.org
Wann kann ich CSS3-Farbverläufe verwenden - CanIUse.com