Wie man CSS3-Gradienten verwendet - Dummies

Ein CSS3-Farbverlauf (eine Mischung aus zwei oder mehr Farben) kann ein netter Hintergrund sein. Früher erstellten Entwickler einen Verlauf, indem sie in einem Bildeditor einen dünnen Verlaufsstreifen erstellten und dann die Wiederholungs-x- oder Wiederholungs-y-Regeln verwendeten, um das kleinere Bild über die Seite zu replizieren. Das war eine schöne Technik, aber es war nicht sehr flexibel und nur relativ einfache lineare Gradienten waren möglich.

CSS3 hat eine bemerkenswerte Gradientenregel hinzugefügt, die Gradienten nativ durch CSS macht. Wenn diese Technik vollständig angewendet wird, erleichtert es die Arbeit mit Farbverläufen erheblich.

CSS3 unterstützt zwei Haupttypen von Gradienten: linear und radial. Ein linearer Gradient ändert Farben entlang einer geraden Linie und ein radialer Gradient strahlt von einem Mittelpunkt nach außen.

Der Gradientenmechanismus war einer der langsameren Teile von CSS, der standardisiert und übernommen wurde. Daher ändert er sich immer noch, aber es sieht so aus, als würden die Browser endlich auf einen Standard setzen. Leider sind die herstellerspezifischen Präfixe vorerst notwendig.

Wie man einen einfachen Farbverlauf erstellt

Der einfachste Farbverlauf ist in Box 1 dargestellt. Er variiert von links nach rechts, beginnend bei rot und endend bei weiß.

# box1 {Hintergrundbild: linearer Verlauf (links, rot, weiß); background-image: -moz-linearer Farbverlauf (links, rot, weiß); background-image: -webkit-linear-gradient (links, rot, weiß);}

So erstellen Sie einen einfachen linearen Verlauf:

Definieren Sie den Selektor.

In CSS ist ein Farbverlauf definiert, und Sie müssen einen beliebigen standardmäßigen CSS-Selektor verwenden, um zu bestimmen, zu welchem Element Sie den Farbverlauf hinzufügen.
Verwenden Sie die Hintergrundbildregel.

Ein Farbverlauf ist eine spezielle Form eines Bildes. Sie können die Hintergrundbildregel verwenden, um einen Verlauf auf den Hintergrund eines Elements anzuwenden, einschließlich des gesamten Körpers der Seite.
Ruft die lineare Gradientenfunktion auf.

Einige CSS-Elemente benötigen Klammern, da sie technisch Funktionen sind. Die Unterscheidung spielt im Moment keine Rolle, aber Sie müssen die Klammern einbeziehen, wenn Sie diesen Werttyp verwenden. Die lineare Gradiententechnik ist eine Funktion.
Bestimmen Sie die Richtung, in die der Farbverlauf fließen soll.

Sie können einen Gradientenfluss in eine beliebige Richtung innerhalb des Elements erstellen. Wenn Sie nach links zeigen, fließt das Element von links nach rechts. Sie können verwenden, um von oben nach unten zu fließen, oder oben links, um von oben links nach unten rechts zu gehen. Verwenden Sie eine Kombination aus oben, links, unten und rechts. Sie können auch einen Winkel in Grad angeben, wie im nächsten Beispiel gezeigt wird.
Geben Sie eine Startfarbe an.

Verwenden Sie eines der Standard-Farbwerkzeuge (Farbnamen, Hex-Farben, rgb () / rgba () oder hsl ()), um die Anfangsfarbe zu bestimmen.
Geben Sie eine Endfarbe an.

Die letzte angezeigte Farbe ist die Endfarbe des Farbverlaufs. Der Verlauf verläuft gleichmäßig von der Anfangs- bis zur Endfarbe.
Wiederholen Sie dies mit Browsererweiterungen.

Sie müssen Varianten für die spezifischen Browser hinzufügen. Sie müssen für jeden Hauptanbieter eine neue Version der Hintergrundbildregel erstellen.

So erstellen Sie einen interessanteren Verlauf

Wenn Sie sich Kasten 2 ansehen, sehen Sie einen komplexeren Verlauf mit mehreren Farben und einem interessanten Winkel.

# box2 {Hintergrundbild: linearer Verlauf (75 Grad, rot, weiß 33%, weiß 66%, blau); Hintergrundbild: -moz-linearer Gradient (75 Grad, rot, weiß 33%, weiß 66%, blau); background-image: -webkit-linear-gradient (75deg, rot, weiß 33%, weiß 66%, blau);}

So fügen Sie Ihren Farbverläufen mehr Pizazz hinzu.

Verwenden Sie einen Winkel für die Richtung.

Anstatt Ihre Farbverlaufsrichtung mit den standardmäßigen Schlüsselwörtern oben / links anzugeben, können Sie einen Startwinkel angeben. Winkel werden mathematisch in Grad gemessen, wobei 0 von rechts und 90 von oben nach unten kommt. Sie müssen die Gradmessung mit deg angeben, daher werden 75 Grad als 75 Grad geschrieben.
Fügen Sie so viele Farben hinzu, wie Sie möchten.

Ein Farbverlauf kann beliebig viele Farben enthalten. Jede Änderung der Farben wird als Farbanschlag bezeichnet. Das Beispiel zeigt drei verschiedene Farben.
Bestimmen Sie, wo die Farbunterbrechung stattfindet.

Standardmäßig sind die Farben gleichmäßig entlang des Verlaufs verteilt. Wenn Sie möchten, können Sie eine beliebige Farbe an eine beliebige Stelle im Verlauf verschieben. Die Farbstoppstellen sind in Prozent angegeben. Es ist nicht notwendig, einen Ort für den ersten und letzten Farbanschlag hinzuzufügen, da angenommen wird, dass sie 0% und 100% betragen.
Erstellen Sie ein Farbband, indem Sie zwei Stops derselben Farbe bereitstellen.

Box 2 verfügt über ein weißes Band. Um diesen Effekt zu erzielen, wurden zwei Farbstopps mit Weiß erzeugt, wobei einer mit 33% und der andere mit 66% auftrat. Das bricht die Steigung etwa in Terzen.
Platzieren Sie zwei Farben an der gleichen Stelle für eine abrupte Farbänderung.

Wenn Sie eine abrupte Farbänderung wünschen, setzen Sie einfach zwei verschiedene Farben auf den gleichen Prozentsatz.
Wiederholen Sie dies für alle Browser.

Auch hier müssen Sie die verschiedenen Browser berücksichtigen, bis diese Technik standardisiert wird.

Erstellen eines radialen Verlaufs

CSS3 unterstützt einen zweiten Verlaufstyp namens radialer Verlauf . Der Grundgedanke ist derselbe: Anstatt einer geraden Linie wie einem linearen Gradienten zu folgen, scheint ein radialer Gradient von einem zentralen Punkt im Element zu fließen und nach außen zu strahlen.

Der grundlegende radiale Farbverlauf, der in Box 3 angezeigt wird, wird mit diesem CSS-Code erstellt:

# box3 {Hintergrundbild: Radialgradient (weiß, blau); Hintergrundbild: -moz-Radialgradient (weiß, blau); background-image: -webkit-radial-gradient (weiß, blau);}

Wie Sie sehen, wird der grundlegende radiale Gradient ähnlich wie ein linearer Gradient erstellt, außer dass die radiale Gradientenfunktion anstelle der linearen Gradientenfunktion verwendet wird. Gradientenfunktion.

Radiale Verläufe haben viele Optionen, was sie recht vielversprechend macht, aber die Browserunterstützung für diese verschiedenen Standards ist ziemlich unübersichtlich. Box 4 hat einen radialen Verlauf mit drei Farben:

# box4 {Hintergrundbild: Radialgradient (rot, weiß, blau); Hintergrundbild: -moz-Radialgradient (rot, weiß, blau); background-image: -webkit-radial-gradient (rot, weiß, blau);}

Es ist auch möglich, die Form des Verlaufs von Kreis zu Ellipse zu ändern, um die Mitte des Verlaufs zu einem anderen Punkt innerhalb des Element, und um Farbstopps anzugeben. Sie müssen die aktuellen Spezifikationen überprüfen, um zu sehen, wie diese Dinge gemacht werden, da sie immer noch sehr experimentell sind.