CSS -Gradient: Crash -Gradientenkurs

In der Vergangenheit haben die meisten Websites Bilder verwendet, um eine sch?ne Benutzeroberfl?che zu erstellen. Dank verschiedener CSS -Attribute hat sich dieser Trend ge?ndert. Dieses Tutorial hilft Ihnen dabei, CSS -Gradienten zu lernen. Sie k?nnen verschiedene UI -Elemente sowie Bilder im Hintergrund mit Gradienten ersetzen. Mit ein wenig übung k?nnen Sie komplexe Muster erstellen, ohne Bilder zu verwenden.

CSS -Gradienten werden im Browser gut unterstützt, sodass Sie reibungslose visuelle überg?nge zwischen zwei oder mehr festgelegten Farben erstellen k?nnen. Mit Gradienten k?nnen Sie viele Einstellungen steuern, z. B. Gr??e, Winkel, Farbstoppposition des Gradienten usw.

In diesem Artikel werde ich lineare, radiale und neuere Wiederholungsgradienten einführen.

Schlüsselpunkte

• CSS -Gradienten werden im Browser weit verbreitet, sodass reibungslose überg?nge zwischen zwei oder mehr festgelegten Farben und der Steuerung vieler Einstellungen wie Gr??e, Winkel und Farbstoppposition gesteuert werden.
• lineare Gradienten sind die am h?ufigsten verwendeten Gradienten, die entlang einer geraden Linie von einer Farbe zur anderen wechseln. Dies kann durch Angabe von Richtung oder Winkel gesteuert werden.
• radiale Gradientenübergangsfarben in einem kreisf?rmigen oder elliptischen Muster, beginnen an einem einzigen Punkt und expandieren nach au?en. Verschiedene Parameter k?nnen verwendet werden, um die Form, Gr??e und Position des Radialgradienten zu steuern.
• Wiederholungsgradienten ?hneln anderen Gradienten, wiederholen Sie jedoch die Farbstoppposition unendlich und erm?glichen die Erstellung komplexer Muster und Hintergründe. Sie nehmen die gleichen Parameter wie nicht repetitive Gradienten.

linearer Gradient

linearer Gradient ist der am h?ufigsten verwendete Gradient. Es sieht so aus, der Wert in Klammern gibt den Typ des Werts an:

<code>.example {
  background: linear-gradient(
    [方向], [第一種顏色], [第二種顏色], [更多顏色 ...]
  );
}</code>

Wenn Sie die Ausrichtung nicht angeben, beginnt der Gradient oben mit der vollen Intensit?t der ersten Farbe und übergeht dann sanft in die letzte Farbe, wenn Sie den Boden erreichen.

Für mehr Kontrolle k?nnen Sie die Richtung des Gradienten angeben. Sie k?nnen einfache Begriffe (wie links, unten rechts) verwenden, um es zu implementieren oder Winkel anzugeben. Der folgende Code -Snippet erstellt einen Hintergrund von links nach rechts:

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

Das Beispiel auf CodePen: links nach rechts linearer Gradient

?ltere Browser unterstützen leicht unterschiedliche Syntaxe und erfordern Browserspezifische Pr?fixe. In ?lteren Browsern geben Sie einen Startpunkt anstelle eines Endpunkts an. Der CSS3 -Gradientencode des alten Browsers lautet wie folgt:

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

Geben Sie den Winkel für lineare Gradient

an

Wenn Sie Gradienten in bestimmten Winkeln erstellen müssen, k?nnen Sie einen Winkel direkt angeben. Der folgende Code erstellt einen Gradienten von 60 Grad:

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

Behandeln Sie die Linie von unten nach oben als Null, und wenn sich die Linie im Uhrzeigersinn bewegt, nimmt der Winkel zu. Zum Beispiel:

<code>.example {
  background: linear-gradient(0deg, red, blue);
}</code>

Dies erzeugt einen Gradienten mit Rot unten und blau oben. Und der folgende Code erstellt einen horizontalen Gradienten mit Rot links und blau rechts:

<code>.example {
  background: linear-gradient(
    [方向], [第一種顏色], [第二種顏色], [更多顏色 ...]
  );
}</code>

Das Beispiel auf CodePen: lineare Gradienten mit unterschiedlichen Winkeln

Geben Sie die Farbstoppposition im linearen Gradienten an

an

Wenn Sie die Farbe ungleichm??ig ?ndern m?chten, k?nnen Sie die Farbstoppposition selbst angeben. Die Farbstoppposition kann als prozentualer Wert oder eine absolute L?nge angegeben werden. Sie müssen keine Stoppposition für die ersten und letzten Farben angeben. Eine bestimmte Farbe hat ihre volle Intensit?t in ihrer angegebenen Farbposition. Hier ist ein Beispiel:

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

Wenn keine Stoppposition angegeben ist, werden die Farben gleichm??ig verteilt.

Das Beispiel auf CodePen: linearer Gradient mit Farbstopps

radialer Gradient

radiale Gradienten sind seltener und komplexer. Dies ist die Syntax des radialen Gradienten:

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

Wenn nichts angegeben ist, ist die Standardform eine Ellipse, die Gr??e ist der am weitesten entfernte Winkel und die Position ist das Zentrum. Die Farbstoppposition ist genauso angegeben wie der lineare Gradient. Der folgende Code -Snippet zeichnet einen elliptischen radialen Gradienten:

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

Das Beispiel auf CodePen: Beispiel für radiale Gradienten

?ndern Sie die Gr??e des radialen Gradienten

Die Gr??e des radialen Gradienten wird durch vier Werte bestimmt: n?chstgelegener, am weitesten angehender, am n?chstgelegener Ereignis und der am weitesten verbreitete Zuneigung. Bei Verwendung mit Formwerten definieren diese Schlüsselw?rter Formen. Die Form des Gradienten funktioniert, wenn sich der Gradient weiterhin unendlich über die Grenzen der Elemente hinaus erstreckt, an denen der Gradient angewendet wird.

Schauen wir uns ein Beispiel an, um dies klarer zu machen. Wir werden vier Gradienten für vier Elemente erstellen:

<code>.example {
  background: linear-gradient(0deg, red, blue);
}</code>

In den folgenden CSS habe ich vier Schlüsselwortwerte verwendet:

<code>.example {
  background: linear-gradient(90deg, red, blue);
}</code>

Das Beispiel auf CodePen: Radialgradienten mit Schlüsselwortwerten der unterschiedlichen Gr??e

Beachten Sie, dass es subtile, aber offensichtliche Unterschiede zwischen jedem Gradienten w?hrend der Demo gibt.

Definieren Sie die Farbstoppposition im radialen Gradienten

Die Farbstoppposition im radialen Gradienten ?hnelt einem linearen Gradienten. Beachten Sie, dass ich auch die Position des Zentrums des Kreises als Prozentsatz angeben. Pixelwerte k?nnen auch bei gewünschtem Wunsch verwendet werden. Hier ist ein Code -Snippet, um dies zu demonstrieren:

<code>.example {
  background: linear-gradient(
    to bottom, yellow, red 70%, black
  );
}</code>

Das Beispiel auf CodePen: radialer Gradient mit Farbstopps

Wiederholungsgradient

Wiederholungsgradienten ?hneln anderen Gradienten und nehmen dieselben Parameter an. Der einzige Unterschied besteht darin, dass sie die Farbstoppposition unendlich wiederholen. Die Position der Farbe wird gem?? mehreren Basisgradientenl?nge ausgeglichen. Wie Sie sehen werden, erm?glicht diese Wiederholung es uns, komplexe Muster und Hintergründe zu erstellen.

Eine Sache zu beachten ist, dass bei Verwendung mehrerer Wiederholungsgradienten auf demselben Element der erste Gradient oben angezeigt wird. Dies bedeutet natürlich, dass, wenn jede Farbe des ersten Gradienten zu 100% undurchsichtig ist (d. H. Keine Transparenz), die anderen Gradienten im Stapel nicht sichtbar sind.

lineare Gradient

wiederholen

Um einen grundlegenden wiederholenden linearen Gradienten zu erstellen, k?nnen wir Folgendes tun:

<code>.example {
  background: linear-gradient(
    [方向], [第一種顏色], [第二種顏色], [更多顏色 ...]
  );
}</code>

Das Beispiel auf CodePen anzeigen: Wiederholende lineare Gradient

wiederholen

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

Um die Farbe pl?tzlich zu ?ndern, müssen Sie zwei Farben angeben. Um ein subtiles Muster zu erstellen, fügen Sie einfach einen weiteren Gradienten hinzu, genau wie das Hinzufügen mehrerer Hintergrundbilder:

Diesmal setze ich den Gradienten auf transparent anstelle von wei?. Ich schlage vor, Sie probieren verschiedene Farben Stopppositionen und Winkel aus. Zeigen Sie das Beispiel auf CodePen an:

Wiederholende lineare Gradienten mit mehreren Gradienten

radiale Gradient wiederholen

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

wiederholte radiale Gradienten ?hneln den Standard -Radialgradienten. Hier ist der Code zum Erstellen eines einfachen sich wiederholenden Radialgradienten:

Das Beispiel auf CodePen anzeigen:

Wiederholende Radialgradient

wiederholen

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

Sie k?nnen auch mehrere wiederholende Radialgradienten wie folgt schichten:

Zeigen Sie das Beispiel auf CodePen an:

Wiederholende Radialgradienten mit mehreren Gradienten

Schlussfolgerung

In diesem Tutorial versuche ich, alle Aspekte von CSS -Gradienten abzudecken. In vielen F?llen, in denen einfache Muster erforderlich sind, k?nnen Gradienten die Verwendung von Bildern beseitigen. W?hrend Gradienten zus?tzliche HTTP -Anfragen nach Bildern vermeiden, k?nnen sie natürlich Leistungsprobleme verursachen und sollten mit Vorsicht verwendet werden.

h?ufig gestellte Fragen zu CSS -Gradienten

Was ist der Unterschied zwischen linearem Gradienten und radialem Gradienten in CSS?

In CSS werden Gradienten verwendet, um reibungslose überg?nge zwischen zwei oder mehr angegebenen Farben zu erzeugen. Der lineare Gradient übergeht die Farbe entlang der Linie und beginnt von einem Punkt zu Ende von einem anderen Punkt. Die Richtung des Gradienten kann durch Winkel (z. B. "nach rechts" oder "45 Grad") oder durch Deklarieren des Startpunkts (z. B. "nach oben") definiert werden.

Andererseits übersieht der radiale Gradient in einem kreisf?rmigen oder ovalen Muster zur Farbe. Sie beginnen an einem Punkt und erweitern sich nach au?en, wodurch eine kreisf?rmige oder ovale Form erzeugt wird. Verschiedene Parameter k?nnen verwendet werden, um die Form, Gr??e und Position des Radialgradienten zu steuern.

Wie erstelle ich wiederholende Gradienten in CSS? CSS bietet eine M?glichkeit, wiederholte Gradienten mit Wiederholungs-linear-Gradient () und Wiederholungsradialgradient () -Funktionen zu erstellen. Diese Funktionen funktionieren ?hnlich wie ihre nicht repetitiven Gegenstücke, wiederholen das angegebene Gradientenmuster auf unbestimmte Zeit und erzeugen ein nahtloses Wiederholungsmuster. Die Syntax dieser Funktionen ?hnelt der von linear-Gradient () und radial-Gradient (), aber Sie müssen die Farbstoppposition in der Art und Weise angeben, wie Sie ein Wiederholungsmuster erstellen.

Was ist die Farbstop -Position im CSS -Gradienten?

Die Farbstoppposition ist die Farbe, die Sie zu einem glatten übergang und den Punkten jeder Farbe im Verlaufsgradienten erfolgen sollten. In einem CSS -Gradienten k?nnen Sie so viele Farbstopps angeben, wie Sie m?chten. Jede Farbstoppposition wird durch einen Farbwert definiert, gefolgt von einer optionalen L?nge oder einem prozentualen Prozentsatz. Wenn Sie nicht L?nge oder Prozentsatz angeben, werden die Farbstopppositionen gleichm??ig verteilt.

Wie kann man die Richtung des linearen Gradienten kontrollieren?

Der erste Parameter der Funktion Linear-Gradient () kann verwendet werden, um die Richtung des linearen Gradienten zu steuern. Dieser Parameter kann ein Winkel (z. B. "45DEG") oder ein Schlüsselwort sein, das den Ausgangspunkt wie "nach rechts" oder "bis oben links" angibt. Wenn Sie die Richtung nicht angeben, geht der Gradient von oben nach unten.

Wie kann man die Form und Gr??e von Radialgradienten kontrollieren?

Der erste Parameter der Funktion Radial-Gradient () kann verwendet werden, um die Form und Gr??e des Radialgradienten zu steuern. Dieser Parameter kann ein Formw?rter ("Kreis" oder "Ellipse") sein, gefolgt von einem Schlüsselwort der optionalen Gr??e ("n?chstgelegener Seite", "weiteste Seite", "n?chstgelegener Ewige", "am weitesten Corner" und / / / / / / / / / / / oder Ort. Wenn Sie keine Form angeben, wird der Gradient zu einem Oval. Wenn Sie die Gr??e nicht angeben, erstreckt sich der Gradient auf die n?chste Seite.

Kann ich Transparenz im CSS -Gradienten verwenden?

Ja, Sie k?nnen Transparenz in CSS -Gradienten mithilfe von RGBA -Farbwerten verwenden. Der RGBA -Farbwert wird angegeben durch: RGBA (Rot, Grün, Blau, Alpha). Der Alpha -Parameter betr?gt eine Zahl zwischen 0,0 (vollst?ndig transparent) und 1,0 (vollst?ndig undurchsichtig).

Wie erstellt man einen Gradienten mit harten Farbvariationen?

Um einen Gradienten mit harten Farb?nderungen zu erstellen, k?nnen Sie mehrere Farbstopppositionen mit derselben Position verwenden. Zum Beispiel erzeugt "Blau, grün 50%, grün 50%, gelb" einen Gradienten, der sich in der Mitte pl?tzlich von blau zu grün wechselt und am Ende von grün bis gelb.

Kann ich Gradienten als Hintergrundbild verwenden?

Ja, Sie k?nnen Gradienten als Hintergrundbild in CSS verwenden. Die Gradientenfunktion gibt den CSS -Bilddatentyp zurück und kann überall dort verwendet werden, wo das Bild verwendet werden kann. Beispielsweise k?nnen Sie Gradienten als Hintergrundbild für Elemente oder als Teil mehrerer Hintergründe verwenden.

Kann ich Gradienten in CSS animieren?

CSS unterstützt keine direkten Animationsgradienten. Sie k?nnen jedoch ?hnliche Effekte durch animierte Hintergrundposition oder Hintergrundgr??e von Elementen mit wiederholten Gradienten oder durch Verwendung von Gradienten als Maske für den Animationsinhalt erzielen.

Unterstützen alle Browser CSS -Gradienten?

CSS -Gradienten werden von allen modernen Browsern, einschlie?lich Chrome, Firefox, Safari, Edge und Internet Explorer 10 und sp?ter, h?ufig unterstützt. Für ?ltere Browser, die keine Gradienten unterstützen, sollten Sie alternative Farben bereitstellen.

Das obige ist der detaillierte Inhalt vonCSS -Gradienten: Ein Syntax -Crash -Kurs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!