CSS - Verläufe: Eine farbenfrohe Reise für Anfänger

Hallo da draußen, zukünftige CSS-Zauberer! Heute tauchen wir ein in die lebendige Welt der CSS-Verläufe. Setzt euch an den Computer, denn wir werden das Web mit Farben malen, die nahtlos ineinander übergehen. Vertraut mir, bis zum Ende dieses Tutorials werdet ihr farbige Meisterwerke schaffen, die selbst Picasso neidisch machen würden!

Was ist ein CSS-Verlauf?

Stellt euch vor, ihr malt eine Wand, aber anstatt nur eine Farbe zu verwenden, möchtet ihr, dass sie von einer Farbe zur anderen übergeht. Genau das macht ein CSS-Verlauf, aber auf eurer Webseite! Es ist eine Möglichkeit, nahtlos zwischen zwei oder mehr Farben zu übergehen und dabei schöne, auffällige Effekte zu erzeugen, ohne Bilder zu verwenden.

Arten von CSS-Verläufen

In der CSS-Farbenpalette haben wir drei Hauptarten von Verläufen:

1. Lineare Verläufe
2. Zentrische Verläufe
3. Kegelförmige Verläufe

Lassen wir uns gemeinsam diese Arten genauer ansehen,好不好?

Lineare Verläufe

Lineare Verläufe sind wie eine gerade Linie von Farben, die von Punkt A zu Punkt B wechselt. Es ist die am häufigsten verwendete und leichteste zu verstehende Art, daher fangen wir hier an.

.linear-gradient {
background: linear-gradient(rechts, rot, gelb);
}

In diesem Beispiel erstellen wir einen Verlauf, der von links nach rechts geht und von rot nach gelb übergeht. Einfach, oder?

Aber wartet, es gibt mehr! Wir können auch die Richtung mit Winkeln angeben:

.angled-gradient {
background: linear-gradient(45deg, blau, grün);
}

Dies erzeugt einen diagonalen Verlauf von blau nach grün bei einem Winkel von 45 Grad.

Zentrische Verläufe

Zentrische Verläufe sind wie kreisförmige Regenbögen, bei denen die Farben von einem zentralen Punkt aus strahlen.

.radial-gradient {
background: radial-gradient(kreis, rot, gelb, grün);
}

Dies erzeugt einen kreisförmigen Verlauf, der mit rot in der Mitte beginnt, dann gelb und schließlich grün nach außen.

Kegelförmige Verläufe

Kegelförmige Verläufe sind die neuen Kids im Block. Sie sind wie ein Farbkreis, bei dem die Farben um einen Mittelpunkt rotieren.

.conic-gradient {
background: conic-gradient(rot, gelb, grün, blau, rot);
}

Dies erzeugt eine vollständige Drehung der Farben, beginnend und endend mit rot.

Syntax

Nun zerlegen wir die Syntax für diese Verläufe:

Verlaufstyp	Grundlegende Syntax
Linear	linear-gradient([Richtung,] Farbe1, Farbe2, ...)
Zentrisch	radial-gradient([Form Größe bei Position,] Farbe1, Farbe2, ...)
Kegelförmig	conic-gradient([von Winkel,] Farbe1, Farbe2, ...)

Verläufe für Rahmen

Wusstet ihr, dass ihr Verläufe auch für Rahmen verwenden könnt? Es ist, als würde man deinem Element einen schicken Gürtel verpassen!

.gradient-border {
border: 10px fest;
border-image: linear-gradient(rechts, rot, blau) 1;
}

Dies erzeugt einen Rahmen, der von rot nach blau übergeht.

Positionierung von Farbhaltestellen

Farbhaltestellen sind wie Kontrollpunkte in deinem Verlauf. Du kannst sie präzise platzieren:

.color-stops {
background: linear-gradient(rechts, rot 20%, gelb 40%, grün 60%, blau 80%);
}

Dies erzeugt einen Verlauf mit spezifischen Farbübergängen bei 20%, 40%, 60% und 80% der Breite des Elements.

Erstellung von harten Linien

Möchtet ihr eine plötzliche Farbänderung anstelle eines sanften Übergangs? Verwendet einfach die gleiche Prozentangabe für benachbarte Farbhaltestellen:

.hard-lines {
background: linear-gradient(rechts, rot 50%, blau 50%);
}

Dies erzeugt eine harte Linie zwischen rot und blau genau in der Mitte.

Farbttore mit Verläufen

Ihr könnt Farbttore durch wiederholte Farbhaltestellen erstellen:

.color-bands {
background: linear-gradient(rechts, rot 25%, gelb 25% 50%, grün 50% 75%, blau 75%);
}

Dies erzeugt vier gleich breite Farbttore.

Gestapelte Verläufe

Möchtet ihr wirklich schick werden? Stapelt mehrere Verläufe übereinander:

.stacked-gradients {
background:
linear-gradient(rechts, rgba(255,0,0,0.5), rgba(255,0,0,0)),
linear-gradient(nach unten, rgba(0,0,255,0.5), rgba(0,0,255,0));
}

Dies erzeugt einen roten Verlauf von links nach rechts und einen blauen Verlauf von oben nach unten, die sich überlappen.

Verwandte Funktionen

CSS-Verläufe sind Teil einer größeren Familie von Bildfunktionen. Hier sind einige verwandte Funktionen:

Funktion	Beschreibung
repeating-linear-gradient()	Erzeugt einen wiederholenden linearen Verlauf
repeating-radial-gradient()	Erzeugt einen wiederholenden zentrischen Verlauf
repeating-conic-gradient()	Erzeugt einen wiederholenden kegelförmigen Verlauf
image()	Generiert einen Bildwert
image-set()	Ermöglicht es, mehrere Bildquellen für verschiedene Anzeigeresolutionen bereitzustellen

Und da habt ihr es, Leute! Ihr habt gerade euren Crashkurs in CSS-Verläufen abgeschlossen. Denkt daran, der Schlüssel zum Beherrschen von Verläufen ist das Experimentieren. Habt keine Angst, verschiedene Farben, Winkel und Positionen auszuprobieren. Wer weiß? Vielleicht schafft ihr die nächste große Trend im Webdesign!

Nun, geht los und malt das Web mit eurer neu erworbenen Gradientenmacht. Und denkt daran, in der Welt der CSS gibt es keine Fehler, nur glückliche kleine Unfälle (wie Bob Ross sagen würde). Viel Spaß beim Coden!

Credits: Image by storyset