So erstellen Sie lineare Farbverläufe in CSS3

Erstellen von browserübergreifenden linearen Farbverläufen mit CSS3

Das obige Bild zeigt einen einfachen Verlauf von links nach rechts von #999 (dunkelgrau) bis #fff (weiß).

Lineare Farbverläufe sind am einfachsten zu definieren und werden in Browsern am meisten unterstützt. Lineare CSS3-Farbverläufe werden in Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ und Safari 4+ unterstützt.

Identifizieren Sie beim Definieren eines Farbverlaufs seinen Typ.linear oder radial– und wo der Gradient aufhören und beginnen soll. Fügen Sie auch die Farben des Farbverlaufs hinzu und wo diese Farben einzeln beginnen und enden.

Um lineare Farbverläufe mit CSS3 zu definieren, schreiben Sie:

linear-Gradient (Winkel oder Seite oder Ecke, Farbstopp, Farbstopp) 

Zuerst definieren Sie die Art des Verlaufs mit dem Namen.

Anschließend definieren Sie den Start- und Endpunkt des Farbverlaufs auf zwei Arten: den Winkel der Linie in Grad von 0 bis 359, wobei 0 Grad gerade nach oben zeigt. Oder mit den Funktionen „Seite oder Ecke“. Wenn Sie diese weglassen, fließt der Farbverlauf von oben nach unten im Element.

Anschließend definieren Sie die Farbstopps. Die Farbstopps definieren Sie mit dem Farbcode und einem optionalen Prozentsatz. Der Prozentsatz teilt dem Browser mit, wo die Zeile mit dieser Farbe beginnen oder enden soll. Standardmäßig werden die Farben gleichmäßig entlang der Linie platziert. Mehr über Farbstopps erfahren Sie auf Seite 3.

Um den obigen Farbverlauf mit CSS3 zu definieren, schreibst du also:

linearer Gradient (links, #999999 0%, #ffffff 100%); 

Und um es als Hintergrund für ein DIV festzulegen, schreiben Sie:

div {
Hintergrundbild: linearer Farbverlauf (links, #999999 0%, #ffffff 100%;
} 

Browsererweiterungen für CSS3 Linear Gradients

Damit Ihr Farbverlauf browserübergreifend funktioniert, müssen Sie für die meisten Browser Browsererweiterungen verwenden und a Filter für Internet Explorer 9 und niedriger (eigentlich 2 Filter). Alle diese Elemente verwenden die gleichen Elemente, um Ihren Farbverlauf zu definieren (außer dass Sie im IE nur 2-Farben-Farbverläufe definieren können).

Microsoft-Filter und -Erweiterung– Internet Explorer ist am schwierigsten zu unterstützen, da Sie drei verschiedene Zeilen benötigen, um die verschiedenen Browserversionen zu unterstützen. Um den obigen Grau-zu-Weiß-Verlauf zu erhalten, würden Sie schreiben:

/* IE 5,5–7 */
filter: progid: DXImageTransform. Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff', GradientType=1);
/* IE 8–9 */
-ms-filter: "progid: DXImageTransform. Microsoft.gradient (startColorstr='#999999', endColorstr='#ffffff', GradientType=1)";
/* IE 10 */
-ms-linear-gradient (links, #999999 0%, #ffffff 100%); 

Mozilla-Erweiterung-Das -moz- extension funktioniert wie die CSS3-Eigenschaft, nur mit der Erweiterung. Um den obigen Farbverlauf für Firefox zu erhalten, schreiben Sie:

-moz-linear-gradient (links, #999999 0%, #ffffff 100%); 

Opera-Erweiterung-Das -Ö- Erweiterung fügt Opera 11.1+ Farbverläufe hinzu. Um den obigen Farbverlauf zu erhalten, schreiben Sie:

-o-linear-gradient (links, #999999 0%, #ffffff 100%); 

Webkit-Erweiterung-Das -webkit- Erweiterung funktioniert ähnlich wie die CSS3-Eigenschaft. Um den obigen Farbverlauf für Safari 5.1+ oder Chrome 10+ zu definieren, schreiben Sie:

-webkit-linear-gradient (links, #999999 0%, #ffffff 100%); 

Es gibt auch eine ältere Version der Webkit-Erweiterung, die mit Chrome 2+ und Safari 4+ funktioniert. Darin definieren Sie den Verlaufstyp als Wert und nicht im Eigenschaftsnamen. Um den Farbverlauf von Grau zu Weiß mit dieser Erweiterung zu erhalten, schreiben Sie:

-webkit-gradient (linear, links oben, rechts oben, Farbstopp (0%, #999999), Farbstopp (100%, #ffffff)); 

Vollständiger CSS3-CSS-Code mit linearem Farbverlauf

Für eine vollständige browserübergreifende Unterstützung, um den obigen Grau-zu-Weiß-Verlauf zu erhalten, sollten Sie zuerst eine Fallback-Volltonfarbe einschließen für Browser, die keine Farbverläufe unterstützen, und das letzte Element sollte der CSS3-Stil für Browser sein, die vollständig sind konforme. Sie schreiben also:

Hintergrund: #999999;
Hintergrund: -moz-linear-gradient (links, #999999 0%, #ffffff 100%);
Hintergrund: -webkit-gradient (linear, links oben, rechts oben, Farbstop (0%,#999999), Farbstop (100%,#ffffff));
Hintergrund: -webkit-linear-gradient (links, #999999 0%, #ffffff 100%);
Hintergrund: -o-linear-gradient (links, #999999 0%, #ffffff 100%);
Hintergrund: -ms-linear-gradient (links, #999999 0%, #ffffff 100%);
filter: progid: DXImageTransform. Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff',GradientType=1);
-ms-filter: progid: DXImageTransform. Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff',GradientType=1);
Hintergrund: linear-Gradient (links, #999999 0%, #ffffff 100%); 

Erstellen von diagonalen Farbverläufen – Der Winkel des Farbverlaufs

Start- und Stopppunkt bestimmen den Neigungswinkel. Die meisten linearen Farbverläufe verlaufen von oben nach unten oder von links nach rechts. Es ist jedoch möglich, einen Farbverlauf aufzubauen, der sich auf einer diagonalen Linie bewegt. Das Bild auf dieser Seite zeigt einen einfachen Farbverlauf, der sich in einem 45-Grad-Winkel von rechts nach links über das Bild bewegt.

Winkel zum Definieren der Verlaufslinie

Der Winkel ist eine Linie auf einem imaginären Kreis in der Mitte des Elements. Ein Maß für 0 Grad Punkte nach oben, 90 Grad Punkte richtig, 180 Grad Punkte nach unten, und 270 Grad Punkte übrig. Verwenden Sie ein beliebiges Winkelmaß.

In einem Quadrat bewegt sich ein 45-Grad-Winkel von der oberen linken Ecke nach unten rechts, aber in einem Rechteck liegen Start- und Endpunkt etwas außerhalb der Form.

Die üblichere Methode zum Definieren eines diagonalen Farbverlaufs besteht darin, eine Ecke zu definieren, wie z oben rechts und der Farbverlauf bewegt sich von dieser Ecke zur gegenüberliegenden Ecke. Definieren Sie die Ausgangsposition mit folgenden Schlüsselwörtern:

• oben
• Recht
• Unterseite
• links
• Center

Und sie können kombiniert werden, um genauer zu sein, wie zum Beispiel:

• oben rechts
• oben links
• oben in der Mitte
• unten rechts
• unten links
• unten in der Mitte
• rechte Mitte
• linke Mitte

Hier ist das CSS für einen Farbverlauf ähnlich dem abgebildeten, rot zu weiß, der sich von der oberen rechten Ecke nach unten links bewegt:

Hintergrund: ##901A1C;
Hintergrundbild: -moz-linear-gradient (rechts oben,#901A1C 0%,#FFFFFF 100%);
Hintergrundbild: -webkit-gradient (linear, rechts oben, links unten, Farbstopp (0, #901A1C), Farbstopp (1, #FFFFFF));
Hintergrund: -webkit-linear-gradient (rechts oben, #901A1C 0%, #ffffff 100%);
Hintergrund: -o-linear-gradient (rechts oben, #901A1C 0%, #ffffff 100%);
Hintergrund: -ms-linear-gradient (rechts oben, #901A1C 0%, #ffffff 100%);
Hintergrund: linear-Gradient (rechts oben, #901A1C 0%, #ffffff 100%); 

Sie haben vielleicht bemerkt, dass in diesem Beispiel keine IE-Filter vorhanden sind. Das liegt daran, dass der IE nur zwei Arten von Filtern zulässt: von oben nach unten (Standard) und von links nach rechts (mit dem GradientType=1 Schalter).

Farbstopps

Mit den linearen CSS3-Verläufen können Sie Ihrem Verlauf mehrere Farben hinzufügen, um noch ausgefallenere Effekte zu erzielen. Um diese Farben hinzuzufügen, fügen Sie am Ende Ihrer Property zusätzliche Farben ein, getrennt durch Kommas. Sie sollten auch angeben, wo auf der Zeile die Farben beginnen oder enden sollen.

Internet Explorer-Filter unterstützen nur zwei Farbstopps, daher sollten Sie beim Erstellen dieses Farbverlaufs nur die erste und zweite Farbe einschließen, die Sie anzeigen möchten.

Hier ist das CSS für den obigen dreifarbigen Farbverlauf:

Hintergrund: #ffffff;
Hintergrund: -moz-linear-gradient (links, #ffffff 0%, #901A1C 51%, #ffffff 100%);
Hintergrund: -webkit-gradient (linear, links oben, rechts oben, Farbstopp (0%,#ffffff), Farbstopp (51%,#901A1C), Farbstopp (100%,#ffffff));
Hintergrund: -webkit-linear-gradient (links, #ffffff 0%,#901A1C 51%,#ffffff 100%);
Hintergrund: -o-linear-gradient (links, #ffffff 0%,#901A1C 51%,#ffffff 100%);
Hintergrund: -ms-linear-gradient (links, #ffffff 0%,#901A1C 51%,#ffffff 100%);
filter: progid: DXImageTransform. Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1);
Hintergrund: linear-Gradient (links, #ffffff 0%,#901A1C 51%,#ffffff 100%); 

Sehen Sie sich diesen linearen Farbverlauf mit drei Farbstopps in Aktion an, indem Sie nur CSS verwenden.