Erstellen von linearen Farbverläufen mit CSS3
Lineare Gradienten
Die häufigste Art von Verlauf ist ein linearer Verlauf von zwei Farben. Dies bedeutet, dass sich der Verlauf in einer geraden Linie bewegt und sich von der ersten Farbe zur zweiten entlang dieser Linie ändert. Das Bild auf dieser Seite zeigt einen einfachen Farbverlauf von links nach rechts von # 999 (dunkelgrau) bis #fff (weiß).
Lineare Verläufe sind am einfachsten zu definieren und werden in Browsern am besten unterstützt. Die linearen CSS3-Gradienten werden in Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ und Safari 4+ unterstützt. Internet Explorer kann mit einem Farbverläufe hinzufügen Filter und unterstützt sie zurück zu IE 5.5. Dies ist nicht CSS3, aber es ist eine Option für die Browserkompatibilität.
Wenn Sie einen Verlauf definieren, müssen Sie verschiedene Dinge definieren:
- Um welche Art von Gradienten handelt es sich?
linearoderradial - Wo sollte der Farbverlauf beginnen?
- Wo der Gradient aufhören sollte
- Welche Farben sind im Farbverlauf und wo sollen sie beginnen und aufhören?
Um lineare Verläufe mit CSS3 zu definieren, schreiben Sie:
linearer Gradient (Winkel oder Seite oder Ecke, Farbstopp, Farbstopp)
- Zuerst definieren Sie die Art des Verlaufs mit dem Namen
linear -Gradient. - Dann definieren Sie die Start- und Stop-Punkte des Verlaufs auf eine von zwei Arten: die
Winkelder Linie in Grad von 0 bis 359, wobei 0 Grad gerade nach oben zeigt. Oder mit der Funktion "Seite oder Ecke", zlinks,Recht,Unterseite, undoben. Diese werden auf der nächsten Seite näher erläutert. Wenn Sie diese weglassen, fließt der Farbverlauf von oben nach unten. - Dann definieren Sie die Farbstopps. Sie definieren die Farbstopps mit dem Farbcode und einem optionalen Prozentsatz. Der Prozentsatz teilt dem Browser mit, wo in der Zeile diese Farbe beginnen oder enden soll. Standardmäßig werden die Farben gleichmäßig entlang der Linie platziert. Auf Seite 3 erfahren Sie mehr über Farbstopps.
Um den obigen Verlauf mit CSS3 zu definieren, schreiben Sie:
linearer Gradient (links, # 999999 0%, #ffffff 100%);
Und als Hintergrund von a DIV du schreibst:
div {Hintergrundbild: linearer Farbverlauf (links, # 999999 0%, #ffffff 100%;} Browsererweiterungen für lineare CSS3-Farbverläufe
Damit Ihr Farbverlauf browserübergreifend funktioniert, müssen Sie für die meisten Browser Browsererweiterungen verwenden Filter für Internet Explorer 9 und niedriger (eigentlich 2 Filter). Für alle diese Elemente sind die gleichen Elemente erforderlich, um den Verlauf zu definieren (mit der Ausnahme, dass Sie nur zwei Farbverläufe im IE definieren können).
Microsoft Filter und Erweiterung- Der 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-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-linearer Gradient (links, # 999999 0%, #ffffff 100%);
Mozilla-Erweiterung-Das -moz- Erweiterung funktioniert wie die CSS3-Eigenschaft, nur mit der -moz- Erweiterung. Um den obigen Verlauf für Firefox zu erhalten, schreiben Sie:
-moz-linearer Gradient (links, # 999999 0%, #ffffff 100%);
Opera-Erweiterung-Das -O- Erweiterung fügt Opera 11.1+ Farbverläufe hinzu. Um den obigen Verlauf zu erhalten, schreiben Sie:
-o-linearer Gradient (links, # 999999 0%, #ffffff 100%);
Webkit-Erweiterung-Das -webkit- Die Erweiterung funktioniert ähnlich wie die CSS3-Eigenschaft. Um den obigen Verlauf für Safari 5.1+ oder Chrome 10+ zu definieren, schreiben Sie:
-webkit-linearer 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 grau-weißen Farbverlauf mit dieser Erweiterung zu erhalten, schreiben Sie:
-webkit-gradient (linear, links oben, rechts oben, Farbstopp (0%, # 999999), Farbstopp (100%, # ffffff)); Vollständiger CSS3-Code für linearen Farbverlauf
Um vollständige Browserübergreifende Unterstützung zu erhalten, sollten Sie zunächst einen Fallback-Solid-Color für Browser verwenden, der keine Farbverläufe unterstützt. Der letzte Eintrag sollte der CSS3-Stil für Browser sein, die vollständig kompatibel sind. Sie schreiben also:
Hintergrund: # 999999;Hintergrund: -moz-linearer Gradient (links, # 999999 0%, #ffffff 100%);Hintergrund: -webkit-gradient (linear, links oben, rechts oben, Farbstopp (0%, # 999999), Farbstopp (100%, # ffffff));Hintergrund: -webkit-linearer Gradient (links, # 999999 0%, #ffffff 100%);Hintergrund: -o-linearer Gradient (links, # 999999 0%, #ffffff 100%);Hintergrund: -ms-linearer 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: linearer Gradient (links, # 999999 0%, #ffffff 100%);
Auf den nächsten Seiten dieses Tutorials werden die Teile eines Farbverlaufs detaillierter erklärt. Auf der letzten Seite werden Sie auf ein Werkzeug hingewiesen, mit dem Sie CSS3-Farbverläufe automatisch erstellen können.
Sehen Sie diesen linearen Verlauf nur mit CSS in Aktion.
02 von 04Erstellen diagonaler Farbverläufe - Der Winkel des Farbverlaufs
Die Start- und Stopppunkte bestimmen den Winkel der Steigung. Die meisten linearen Farbverläufe sind von oben nach unten oder von links nach rechts. Es ist jedoch möglich, einen Farbverlauf zu erstellen, der sich auf einer diagonalen Linie bewegt. Das Bild auf dieser Seite zeigt einen einfachen Farbverlauf, der sich in einem Winkel von 45 Grad von rechts nach links über das Bild bewegt.
Winkel zur Definition der Verlaufslinie
Der Winkel ist eine Linie auf einem imaginären Kreis in der Mitte des Elements. 0 Grad zeigt nach oben 90 Grad zeigt nach rechts, 180 Grad zeigt nach unten und 270 Grad zeigt nach links. Sie können einen beliebigen Winkel zwischen 0 und 359 Grad definieren.
Beachten Sie, dass sich in einem Quadrat ein Winkel von 45 Grad von der oberen linken Ecke nach rechts unten bewegt. In einem Rechteck befinden sich die Start- und Endpunkte jedoch etwas außerhalb der Form, wie Sie im Bild sehen können.
Die gebräuchlichste Methode zum Definieren eines diagonalen Verlaufs ist das Definieren einer Ecke, z oben rechts und der Farbverlauf wird von dieser Ecke in die gegenüberliegende Ecke verschoben. Sie können die Startposition mit den folgenden Schlüsselwörtern definieren:
- oben
- Recht
- Unterseite
- links
- Center
Und sie können kombiniert werden, um genauer zu sein, wie:
- 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 nach Weiß, der sich von der oberen rechten Ecke nach links unten bewegt:
Hintergrund: ## 901A1C;Hintergrundbild: -moz-linearer Gradient (rechts oben, # 901A1C 0%, # FFFFFF 100%);Hintergrundbild: -webkit-gradient (linear, rechts oben, links unten, Farbstopp (0, # 901A1C), Farbstopp (1, #FFFFFF));Hintergrund: -webkit-linearer Gradient (rechts oben, # 901A1C 0%, #ffffff 100%);Hintergrund: -o-linearer Gradient (rechts oben, # 901A1C 0%, #ffffff 100%);Hintergrund: -ms-linearer Gradient (rechts oben, # 901A1C 0%, #ffffff 100%);Hintergrund: linearer Gradient (rechts oben, # 901A1C 0%, #ffffff 100%);
Möglicherweise haben Sie festgestellt, dass in diesem Beispiel keine IE-Filter vorhanden sind. Der IE erlaubt nämlich nur zwei Arten von Filtern: von oben nach unten (Standardeinstellung) und von links nach rechts (mit der Option ") GradientType = 1 Schalter).
Sehen Sie diesen diagonalen linearen Verlauf nur mit CSS in Aktion.
03 von 04Farbstopps
Mit linearen CSS3-Farbverläufen können Sie Ihrem Farbverlauf mehrere Farben hinzufügen, um noch schickere Effekte zu erzielen. Um diese Farben hinzuzufügen, fügen Sie am Ende Ihrer Eigenschaft zusätzliche Farben hinzu, die durch Kommas getrennt sind. Sie sollten angeben, wo in der Zeile auch die Farben beginnen oder enden sollen.
Internet Explorer-Filter unterstützen nur zwei Farbstopps. Wenn Sie diesen Farbverlauf erstellen, sollten Sie nur die erste und die zweite Farbe einschließen, die Sie anzeigen möchten.
Hier ist das CSS für den obigen 3-Farbverlauf:
Hintergrund: #ffffff;Hintergrund: -moz-linearer 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-linearer Gradient (links, #ffffff 0%, # 901A1C 51%, # ffffff 100%);Hintergrund: -o-linearer Gradient (links, #ffffff 0%, # 901A1C 51%, # ffffff 100%);Hintergrund: -ms-linearer Gradient (links, #ffffff 0%, # 901A1C 51%, # ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);Hintergrund: linearer Gradient (links, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Sehen Sie diesen linearen Verlauf mit drei Farbstopps in Aktion, indem Sie nur CSS verwenden.
04 von 04Bilden Sie Farbverläufe einfacher
Ich empfehle Ihnen zwei Websites, die Ihnen beim Erstellen von Farbverläufen helfen. Sie haben jeweils Vor- und Nachteile. Ich habe noch keinen Gradientengenerator gefunden, der noch alles bietet.
Ultimativer CSS-GradientengeneratorDieser Gradientengenerator ist sehr beliebt, da er ähnlich wie Gradientengeneratoren in Programmen wie Photoshop funktioniert. Ich mag es auch, weil es Ihnen alle CSS-Erweiterungen gibt, nicht nur Webkit und Mozilla. Das Problem bei diesem Generator ist, dass er nur horizontale und vertikale Gradienten unterstützt. Wenn Sie diagonale Verläufe machen möchten, müssen Sie zu dem anderen Generator gehen, den ich empfehle. CSS3-GradientengeneratorDieser Generator brauchte etwas länger als der erste, aber er kann die Richtung in eine Diagonale ändern. Wenn Sie einen anderen CSS-Verlaufsgenerator kennen, der Ihnen besser gefällt, teilen Sie uns dies bitte mit.
