CSS -Gradienten: Ein Syntax -Crash -Kurs

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!