Das beste CSS3 Gradient-Tutorial im Jahr 2024. In diesem Tutorial können Sie Browser-Unterstützung,CSS3 linearen Gradienten,Beispiele,Beispiele,Beispiele,Verwenden Winkel,Beispiele,Die Verwendung mehrerer Farb Knoten,Beispiele,Beispiele,Transparency (Transparenz),Beispiele,Doppelte linearen Gradienten,Beispiele,CSS3 radiale Gradienten,Beispiele,Beispiele,Einstellen Form,Beispiele,Verwenden Sie Keywords in verschiedenen Größen,Beispiele,Wiederholen radiale Gradienten,Beispiele, lernen
CSS3-Gradienten (Gradienten) ermöglicht es Ihnen, zwischen zwei oder mehr bestimmten Farben für einen reibungslosen Übergang anzuzeigen.
Zuvor müssen Sie ein Bild verwenden, um diese Effekte zu erzielen. Jedoch durch CSS3-Gradienten (Gradienten) verwenden, können Sie auf die Download-Ereignisse und die Nutzung von Breitband zu reduzieren. Darüber hinaus Elemente der Übergangseffekte besser aussehen, wenn Sie vergrößern, weil die Steigung (Gradient) vom Browser erzeugt wird.
CSS3 definiert zwei Arten von Gradienten (Gradienten):
Die Zahlen in der Tabelle Attribut gibt die volle Unterstützung der ersten Version des Browsers.
Hinter mit -webkit -, - moz- oder -o- gibt die erforderliche Anzahl mit dem Präfix-Attribut die erste Version zu unterstützen.
属性 | |||||
---|---|---|---|---|---|
linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
repeating-linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
repeating-radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
Um einen linearen Gradienten erstellen, müssen Sie mindestens zwei Farben Knoten definieren. Farb Knoten, ist die Farbe, die Sie für einen reibungslosen Übergang zu zeigen. Zur gleichen Zeit können Sie auch einen Startpunkt gesetzt und eine Richtung (oder einen Winkel).
Linear Gradient Beispiele:
Linear Gradient - von oben nach unten (Standard)
Das folgende Beispiel zeigt einen linearen Gradienten von oben. Der Ausgangspunkt ist rot, und Übergang langsam blau:
Linearen Gradienten von oben nach unten:
Linear Gradient - von links nach rechts
Das folgende Beispiel zeigt einen linearen Gradienten von links. Der Ausgangspunkt ist rot, und Übergang langsam blau:
Linearen Gradienten von links nach rechts:
Linear Gradient - diagonal
Sie können durch die Angabe horizontale und vertikale Ausgangsposition einen diagonalen Gradienten zu machen.
Das folgende Beispiel zeigt von der oberen linken Ecke (rechts unten) linearen Gradienten. Der Ausgangspunkt ist rot, und Übergang langsam blau:
Von oberen rechten Ecke eines linearen Gradienten bis unten links:
Wenn Sie mehr Kontrolle über die Richtung des Gradienten tun möchten, können Sie einen Standpunkt zu definieren, anstatt einer vorgegebenen Richtung (nach unten, nach oben, nach rechts, nach links, nach rechts unten, und so weiter).
Winkel bezieht sich auf den Winkel zwischen der Horizontalen und dem Gradienten Linie gegen den Uhrzeigersinn berechnet wird. Mit anderen Worten, 0deg ein Gefälle von unten schaffen wird nach oben, schafft 90 Grad ein Gefälle von links nach rechts.
Beachten Sie jedoch, dass viele Browser (Chrome, Safari, fiefox, etc.) den alten Standard, nämlich 0deg einen Gradienten schaffen wird von links nach rechts, 90 Grad wird eine Steigung von unten nach oben schaffen. Umrechnungsformel 90 - x = y , wobei x der Standardwinkel, y ist ein Nicht-Standard - Winkel.
Das folgende Beispiel zeigt, wie die lineare Steigungswinkel verwenden:
Linear Gradient mit einem bestimmten Winkel:
Das folgende Beispiel zeigt, wie eine Vielzahl von Farb Knoten zu setzen:
Linear Gradient von oben nach unten mit einer Vielzahl von Farb Knoten:
Das folgende Beispiel zeigt, wie ein Regenbogen von Farben und Text mit einem linearen Gradienten zu erzeugen:
CSS3 Gradienten unterstützt auch Durchsichtigkeit (Transparenz), kann es verwendet werden, um den Effekt der Schwächung Blendungen zu schaffen.
So fügen Sie Transparenz, verwenden wir rgba () Funktion, um die Farbe des Knotens zu definieren. RGBA () Funktion der letzte Parameter einen Wert von 0 bis 1 ist, die die Transparenz der Farbe definiert: 0 ist vollständig transparent, 1 vollständig undurchsichtig ist.
Das folgende Beispiel zeigt einen linearen Gradienten von links. Der Ausgangspunkt ist vollständig transparent und über langsam völlig undurchsichtig rot:
Linearen Gradienten von links nach rechts, mit Transparenz:
Wiederholung lineare Gradienten () Funktion eines linearen Gradienten zu wiederholen, wird verwendet:
Ein doppelter linearer Gradient:
Radial Gradient wird durch seine Mitte definiert.
Um einen radialen Verlauf erstellen, müssen Sie auch mindestens zwei Farben Knoten definieren. Farb Knoten, ist die Farbe, die Sie für einen reibungslosen Übergang zu zeigen. Zur gleichen Zeit können Sie auch angeben, die Mitte der Abstufung, die Form (Prototyp oder oval), Größe. In der Standardeinstellung ist jene, in der Mitte Center (in der Mitte dargestellt), die Form der Abstufung ist Ellipse (dargestellt Ellipse), ist die Größe der Steigung am weitesten-Ecke (in die hinterste Ecke dargestellt).
Radial Gradient Beispiele:
Radial Gradient - Farbknoten gleichmäßig verteilt (standardmäßig)
Radial Farbverlauf Knoten gleichmäßig verteilt:
Radialverlauf - die Farbe ungleichmäßig Knoten verteilt
Radial Farbverlauf Knoten ungleich verteilt:
Formparameter definiert die Form. Es kann ein Wert Kreis oder eine Ellipse sein. Wobei Kreis den Kreis darstellt, Ellipse zeigt oval. Der Standardwert ist Ellipse.
Die Form eines kreisförmigen radialen Gradienten:
Größe Parameter definiert die Größe des Gradienten. Es können die folgenden vier Werte annehmen:
Radial-Gradienten mit unterschiedlichen Größen Schlüsselwörter:
Wiederholung-Radial-Gradienten () Funktion eine radiale Gradienten zu wiederholen verwendet wird:
Wiederholen Sie einen radialen Verlauf: