Cascading-Style-Sheets

Gradients (Farbverläufe) bestehen normalerweise aus einer Farbe, die in eine andere übergeht. Du kannst jedoch JEDEN Aspekt des Farbverlaufs mit CSS steueren. Die Richtung, die Form und die Farben. Es gibt drei Arten von Farbverläufen, die ich dir hier vorstellen werde (plus coole Muster): linear, radial & konisch.

Der am häufigsten benutze Gradient in der Webentwicklungs-Welt ist der linear-gradient(). Er ist linear, da die Farben von links nach rechts, von oben nach unten oder in einem beliebigen Winkel in eine einzelne Richtung fließen.

Verwendung

Die Syntax ist sehr einfach, ein Gradient wird immer über die CSS-Eigenschaft background oder background-image deklariert. Ein einfaches Beispiel zum start, ein einfacher Farbverlauf von oben nach unten:
Ergebnis:

Wenn du die Richtung des Farbverlaufes ändern möchtest, kannst do das ganz einfach, innerhalb der linear-gradient() Funktion durch den zusätzlichen Parameter to ändern. Beispiel:

Ergebnis:

Natürlich kannst du auch mehr als nur 2 Farben zu deinem linearen Gradienten hinzufügen. deiner Kreativität sind also keinerlei Grenzen gesetzt.

Radiale Gradienten unterscheiden sich von linearen Gradienten dadurch, dass sie an einem bestimmten Punkt beginnen und dann nach außen strahlen. Diese Farbverläufe werden häufig für die Simulation von Lichtquellen benutzt. Da radiale Gradienten nicht immer gerade verlaufen, wirken die Farbübergänge wesentlich natürlicher.

Die radial-gradient()-Funktion wird natürlich, wie bei den linearen Gradienten, in der background-Eigenschaft benutzt. Die radial-gradient()-Funktion erlaubt eine Vielzahl an Werten, die wir uns jetzt anschauen:

shape: Bestimmt die Form des Farbverlaufs, der beim Übergang von einer Farbe zur nächsten nach außen folgt. Da es sich um radiale Farbverläufe handelt, sind die Formen nur kreisförmig.Du kannst diesen Wert weglassen und die Notation misst die Seitenlängen des Elements, um festzustellen, ob ein Wert besser zur Situation passt. Zum Beispiel passt ein Element, das ein perfektes Quadrat ist, hervorragend mit circle zusammen, während alles, was rechteckig ist zu ellipse passt.

size: Beeinflusst die Form des Verlaufes, in dem der shape Wert zur Hand genommen wird und in der Mitte festgelegt wird, an der Stelle, wo der Verlauf enden soll. Dies kann durch den Namen oder ein genaues Längenmaß ausgedrückt werden.

closest-side: Der Farbverlauf endet an der Seite, die der Mitte am nächsten liegt. Wenn zwei Seiten diese Kriterien erfüllen, wird es gleichmäßig verteilt.

farthest-side: (Der default-Wert) Das Gegenteil con closest-side, hier endet der Farbverlauf an der Seite, die am weitesten von der Mitte entfernt ist.

closest-corner: Der Farbverlauf endet an der Ecke, die der Mitte am nächsten kommt.

farthest-corner: Du kannst es dir schon denken, oder? Das Gegenteil zu closest-corner. Hier endet der Farbverlauf an der Ecke, die am weitesten von der Mitte entfernt ist-.

radius: Du kannst einen numerischen Wert angeben, der als Radius des Kreises dient. Dies muss in positiven Pixeln oder relativen Einheiten angegeben werden. Leider sind keine negativen Einheiten oder Prozentsätze zulässig, da ein negativer Kreis Vakuum wäre (und du das Raumzeitkontinuum zerstören würdest) und Prozentsätze relativ zu einer beliebigen Anzahl von Umgebungswerten sein können.

position: Im Endeffekt funktioniert es hier ähnlich wie beim background-position. Das bedeutet, top, right, left & centerfunktionieren hier, auch Kombinationen aus den Werten. Du kannst auch eine genaue Position mithilfe eines numerischen Werts angeben, einschließlich des Prozentsatzes, der sich alle auf den Begrenzungsrahmen des Elements bezieht. Default ist immer . center center.

Beispiel für einen radialen Farbverlauf:

Ergebnis:

Beispiel für einen radialen Farbverlauf mit "Formveränderung":

Ergebnis:

Beispiel für einen radialen Farbverlauf mit "Positionsveränderung":

Ergebnis:

Auf konische Gradienten und das Wiederholen von Gradienten, möchte ich an dieser Stelle nicht eingehen, da sie im Alltag fast keine Anwendung finden, solltest du allerdings genau das gescuht haben, hab ich hier einen wundervollen Artikel für dich: CSS-Tricks.com

Coole Muster musst du gar nicht aufwendig designen, benutze einfach ein paar Zeilen CSS. Due siehst hier vier Container, die jeweils einen unterschiedlichen Background bekommen haben. Das CSS findest du nach den Mustern.

Ich habe nichts weiter gemacht, als dem Container über eine CSS-Klasse ein wenig Styling zu geben. Folgende Backgrounds habe ich benutzt:

.pattern1 {
background: linear-gradient(315deg, transparent 75%, #b300b3 0)-10px 0,
linear-gradient(45deg, transparent 75%, #b300b3 0)-10px 0,
linear-gradient(135deg, #a7332b 50%, transparent 0) 0 0,
linear-gradient(45deg, #6a201b 50%, #561a16 0) 0 0 #561a16;
background-size: 20px 20px; }

.pattern2 {
background-color: #b300b3;
background-image: linear-gradient(
45deg, black 25%, transparent 25%, transparent 75%, black 75%, black ),
linear-gradient(
45deg, black 25%, transparent 25%, transparent 75%, black 75%, black );
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}

.pattern3 {
background-color: #b300b3;
background-image: linear-gradient(
90deg, rgba(255, 255, 255, 0.07) 50%, transparent 50% ),
linear-gradient(90deg, rgba(255, 255, 255, 0.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.19) 50%);
background-size: 13px, 29px, 37px, 53px;
}

.pattern4 {
background: linear-gradient(135deg, #eceddc 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #eceddc 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #eceddc 25%, transparent 25%),
linear-gradient(45deg, #eceddc 25%, transparent 25%);
background-size: 100px 100px;
background-color: #b300b3;
}

Es kommt eigentlich fast ständig vor, dass man Ränder um seine Container zeichnen muss. Aber warum nicht mal mit den Möglichkeiten des Designs der Border spielen?

background-image: linear-gradient(45deg, #b300b3, #561a16);
border-radius: 16px;
padding: 10px;

background-image: linear-gradient(#b300b3 50%, transparent 50%);
border: 1px solid #b300b3;
border-radius: 16px;
padding: 10px;

background-image: radial-gradient(#b300b3 35%, transparent 35%);
background-size: 8px 8px;
border-radius: 16px;
padding: 10px;

Wenn es um richtig fancy Farbverläufe gehen soll, hab ich ein ganz tolles Beispiel von Marty für euch. Fahrt mal mit der Maus über die Ausgabe, es wird ein unglaublicher Sonnenaufgang simuliert. Schaut euch gern den Code an, Fork es euch oder probiert einfach aus, Grenzen gibt es nur wenige.

See the Pen CSS Sunset Sunrise by Marty (@okra) on CodePen.