Seit CSS3 haben wir mit den sogenannten Gradients die Möglichkeit, interessantere Hintergründe zu gestalten und müssen nicht mehr nur auf eine einheitliche Farbe setzen bzw. unnötige Requests und Datenmengen dadurch verschwenden, dass wir einen Farbverlauf per Hintergrundbild umsetzen.
Heute werde ich mich mit den grundlegenden Möglichkeiten mit CSS3 Gradients auseinandersetzen und euch diese vorstellen. Auch beschäftigen wir uns am Rande mit dem einen oder anderen potenziellen Anwendungsfall oder kleinem Trick im Bezug auf diese Technologie. CSS3 Gradients sind nämlich bei weitem nicht auf einfache Farbverläufe beschränkt, sondern man kann mit ein wenig Kreativität einiges aus ihnen herausholen.
Was sind CSS3 Gradients?
Unter CSS3 Gradients versteht man im Grunde eine Technologie, die es ermöglicht, Farbverläufe vom Browser zeichnen bzw. darstellen zu lassen. Statt einfache Farbflächen lassen sich also weiche Übergänge von zwei oder mehr Farben realisieren.
Der Vorteil gegenüber der alten Vorgehensweise, Bilder für Farbverläufe zu nutzen, liegt auf der Hand: Es müssen keinerlei zusätzliche Dateien vom Server geladen werden, was z.B. die Anzahl der Requests sowie die Ladezeit verringert.
Des Weiteren haben CSS3 Gradients den Vorteil, dass sie, wie bereits erwähnt, direkt im Browser des Clients generiert werden, was auch ein besseres Aussehen beim “Reinzoomen” mit sich bringt. Ähnlich sieht das beim Responsive Webdesign aus, da sich die Gradients natürlich immer an die jeweiligen Gegebenheiten des Geräts anpassen und nicht ein einheitliches Bild mit einer bestimmten Auflösung geladen werden muss.
Wichtig ist noch, dass zwischen zwei Typen von Gradients unterschieden werden kann:
- Linear Gradients (nach unten, oben, links und rechts sowie diagonal)
- Radial Gradients (breiten sich kreisförmig von einem bestimmten Punkt aus, meist ist das die Mitte)
Auch gilt zu beachten, dass Gradients nicht etwa eine CSS-Eigenschaft
darstellen, sondern ein Wert bzw. eine Funktion für die Eigenschaft
background-image
sind. Besonders Letzteres gerät schnell in
Vergessenheit, da viele nur den kürzeren Syntax mit background
nutzen.
Linear Gradients
Syntax
Wir beginnen, wie immer, mit den einfachen Dingen und schauen uns erstmal den Syntax an:
.gradient {
background: linear-gradient(direction, color-stop1, color-stop2, ...);
}
Hierbei steht direction
für die entsprechende Richtung,
in die der Farbverlauf gehen soll. Lässt man diese aus, wird ein
Gradient mit einem Verlauf von oben nach unten erzeugt.
Ansonsten lässt sich über das Keyword to
in Kombination mit der
entsprechenden Richtung left
, right
, top
, bottom
die Ausrichtung des
Farbverlaufs einstellen.
Darauf folgt dann eine durch Kommata separierte Liste von sogenannten
Color Stops, mindestens zwei davon sind erforderlich.
Horizontale und vertikale Gradients
Möchten wir jetzt z.B. einen Standard-Gradient von oben nach unten mit einem Übergang von rot nach gelb haben, können wir folgenden Code verwenden:
.gradient {
background: linear-gradient(red, yellow);
}
Ein Gradient von links nach rechts würde hingegen so aussehen, diesmal müssen wir die Richtung natürlich angeben:
.gradient {
background: linear-gradient(to right, red , yellow);
}
Diagonale Gradients
Möchte man jetzt einen schrägen bzw. diagonalen Farbverlauf kreieren, können entweder die Ecken oder eine Gradzahl als Richtung angegeben werden.
Wie zuvor nutzen wir für Ersteres das Keyword to
zusammen mit der
entsprechenden Ecken-Bezeichnung. Möchten wir also z.B. einen Verlauf
in Richtung der unteren rechten Ecke erreichen, nutzen wir
to bottom right
als direction
:
.gradient {
background: linear-gradient(to bottom right, red, yellow);
}
Die Reihenfolge der Keywords für die Ecken, also z.B. von bottom
und right
, ist dabei übrigens egal. Man könnte also genauso
right bottom
schreiben.
Dies ist zwar schon mal ganz nett, aber es könnte schon noch ein wenig besser aussehen, z.B. mit einer bestimmten Ausrichtung nach einer Gradzahl.
Hierbei wird es dann schon etwas komplexer:
So stehen 0deg
für einen vertikalen Verlauf von unten nach oben,
90deg
stehen für einen horizontalen Gradient von links nach rechts
und immer so weiter im Uhrzeigersinn. Negative Gradzahlen sind ebenso
erlaubt und laufen dann entgegen den Uhrzeigersinn. Folglich wären
-90deg
beispielsweise ein Gradient von rechts nach links.
Ein Beispiel, welches einen Gradient von links unten nach rechts oben darstellt, könnte so aussehen:
.gradient {
background: linear-gradient(45deg, red, yellow);
}
Wer fleißig mitdenkt, wird feststellen, dass es sich dabei dann
im Grunde um das Äquivalent zu to top right
handelt.
Etwas mehr Sinn würden hingegen z.B. 70deg
ergeben, was so gesehen
zwischen einem Gradient von links nach rechts und einem Farbverlauf
von links unten nach rechts oben liegen würde:
.gradient {
background: linear-gradient(70deg, red, yellow);
}
Mehr als zwei Color Stops und Anpassung der Position
Ebenfalls gibt es, wie schon erwähnt, die Möglichkeit, mehr als zwei Farben (Color Stops) zu definieren. Dafür fügen wir diese einfach mit einem Komma hinzu.
.gradient {
background: linear-gradient(70deg, red, orange, yellow);
}
Um dies nochmal ein wenig zu verfeinern, haben wir zusätzlich bei den Color Stops noch die Option, explizit deren Position zu definieren. Dies funktioniert, indem wir nach der jeweiligen Farbe ein Leerzeichen gefolgt von einem absoluten Wert oder Prozentwert einfügen.
Um die genaue Funktion zu verstehen, spielt man am besten mal mit ein
paar Werten und schaut sich das Ergebnis an. So lässt sich der Übergang
von rot zu gelb z.B. so beeinflussen, dass den überwiegenden Teil des
Gradients gelbe Farben einnehmen, indem man rot den
Color Stop 10%
zuweist:
.gradient {
background: linear-gradient(70deg, red 10%, yellow);
}
Das Besondere an den bestimmten Positionen für die Color Stops ist, dass sich damit auch Flächen mit mehreren Farben ohne Übergang herstellen lassen. Dies erzeugt beispielsweise eine Fläche, wo rot und gelb jeweils die Hälfte des verfügbaren Platzes horizontal gesehen einnehmen:
.gradient {
background: linear-gradient(to right, red 50%, yellow 50%);
}
Der Trick liegt schlicht darin, beiden Color Stops dieselbe Position zuzuweisen.
CSS3 Gradients und Transparenz
Nun haben wir bei den Farben bisher immer auf die Standard-Farben
rot, gelb und Co. zurückgegriffen, allerdings sind wir darauf gar
nicht begrenzt. Es ist, wie bei background-color
und color
möglich,
alle möglichen Farbwerte zu nutzen. Dazu gehört beispielsweise
auch rgba()
, wodurch sich Gradients mit Transparenz erstellen lassen.
Ein Farbverlauf von kompletter Transparenz zu rot wäre somit folgendermaßen umsetzbar:
.gradient {
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
Mit diesem Wissen kann man nun nette Dinge anstellen. So wäre es z.B. denkbar, ein Gradient mit Transparenz als Overlay für ein Bild einzusetzen. Auch ist es möglich, Animationen sehr leicht mit CSS3 Gradients umzusetzen. Ein Beispiel dafür ist die folgende Animation des Hintergrunds:
See the Pen Simple Background Animation with Linear Gradient by JR Cologne (@jr-cologne) on CodePen.
Hierbei nutzen wir die Tatsache aus, dass Gradients im Prinzip ein
background-image
sind und animieren die background-position
.
Repeating Linear Gradients
Linear Gradients lassen sich zusätzlich auch noch wiederholen.
Hierfür wird die Funktion repeating-linear-gradients()
eingesetzt,
welche einen Gradient einfach unendlich wiederholt:
.gradient {
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
Die Anzahl der Wiederholungen lassen sich leider nicht beeinflussen, sondern werden vom Browser bestimmt und an die jeweilige Größe des Elements angepasst.
Radial Gradients
Der zweite Typ der CSS3 Gradients ist der radiale Farbverlauf, welcher sich kreisförmig von einem bestimmten Punkt aus ausbreitet.
Syntax
Wir beginnen wieder mit dem Syntax:
.gradient {
background: radial-gradient(shape size at position, start-color, ..., last-color);
}
Erstmal wird für einen Radial Gradient natürlich die entsprechende
radial-gradient()
-Funktion genutzt. Diese beginnt mit der Form,
in der sich der Gradient ausbreiten soll. Standardmäßig ist das eine
Ellipse. Darauf folgt dann getrennt mit einem Leerzeichen ein Keyword,
das für die Größe und Ausbreitung des Farbverlaufs steht.
Anschließend gibt man noch mit at
eine Position an, von der sich der
Verlauf ausbreiten soll. Hier sind Keywords und Werte wie bei der
CSS-Eigenschaft background-position
erforderlich.
Der Standard ist center
. Zu guter Letzt fehlen natürlich noch die
Color Stops, die sich genauso definieren lassen wie zuvor bei den
Linear Gradients.
Radial Gradients ohne Anpassung von Form, Ausbreitung und Position
Die einfachsten Versionen eines radialen Farbverlaufs mit CSS verzichten erstmal komplett darauf, die Form, Art der Ausbreitung oder die Position anzupassen.
Dies ist ein Radial Gradient, der sich aus der Mitte als Ellipse ausbreitet:
.gradient {
background: radial-gradient(red, yellow, green);
}
Wie zuvor können wir sehr einfach die Color Stops anpassen und so den Farbverlauf ein wenig optimieren:
.gradient {
background: radial-gradient(red 5%, yellow 15%, green 60%);
}
Radial Gradients: Form anpassen
Die Form dieses guten Stücks lässt sich nun wie folgt anpassen:
Wir geben vor den Color Stops schlicht eines der beiden Keywords
circle
oder ellipse
an. Der Standard ist dabei, wie schon gesagt,
ellipse
.
Mit circle
hingegen können wir jetzt einen kreisförmigen
Verlauf definieren:
.gradient {
background: radial-gradient(circle, red, yellow, green);
}
Die Color Stops ließen sich hier selbstverständlich auch wieder anpassen, wodurch wir beispielsweise einfach einen Kreis innerhalb eines Rechtecks erschaffen können, indem wir den beiden Color Stops dieselbe Position zuweisen:
.gradient {
background: radial-gradient(circle, yellow 40%, blue 40%);
}
Anpassung von Ausbreitung und Position
Bei der Anpassung der Ausbreitung sowie der Ursprungsposition wird es
dann etwas kniffelig. Für die Ausbreitung, was oben im Syntax als size
bezeichnet wurde, gibt es vier mögliche Keywords:
closest-side
farthest-side
closest-corner
farthest-corner
(Standard)
In eine tiefere Erklärung der Keywörter kann ich in diesem Artikel leider nicht einsteigen, jedoch definieren alle im Grunde, wie groß die Endform des Gradients sein soll und an welcher Ecke oder Seite sich die Ausbreitung orientiert. Auch hier rate ich jedem dringend, die verschiedenen Werte für ein besseres Verständnis einfach auszuprobieren. Wer mehr über die Bedeutung der einzelnen Keywords wissen möchte, kann sich dies gerne in der Dokumentation des MDN näher anschauen.
Folgendes wäre ein Beispiel für einen solchen Gradient, wobei das
Keyword farthest-side
zum Einsatz kommt:
.gradient {
background: radial-gradient(farthest-side, red, yellow, black);
}
Zusätzlich lässt sich mit at
und einer darauf folgenden
Positionsangabe auch der Ursprung des Gradients beeinflussen.
Hier ein Beispiel für die untere rechte Ecke:
.gradient {
background: radial-gradient(farthest-side at bottom right, red, yellow, black);
}
Prozentwerte sowie absolute Werte sind natürlich ebenfalls möglich:
.gradient {
background: radial-gradient(farthest-side at 70% 20%, red, yellow, black);
}
Zu beachten gilt hierbei, dass der erste Wert der horizontale und der zweite der vertikale Wert ist. Die Reihenfolge der Keywords ist hingegen egal.
Repeating Radial Gradient
Genauso wie bei den linearen Gradients haben wir auch bei
Radial Gradients die Möglichkeit der unendlichen Wiederholung.
Dies funktioniert mit der Funktion repeating-radial-gradient()
und kann beispielsweise so aussehen:
.gradient {
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
Fazit
So, das wars. Da CSS3 Gradients ein Thema darstellt, das durchaus relativ umfangreich ist, war es in diesem Rahmen leider nicht möglich, allzu ausführlich auf alles einzugehen. Ich hoffe, dass der Artikel trotzdem für einige ganz hilfreich ist, die die grundlegenden Möglichkeiten mit CSS3 Gradients kennenlernen möchten.
Wenn ihr Ideen zu speziellen Anwendungsfällen von Gradients habt, könnt ihr mir diese gerne mitteilen. Vielleicht erscheint dann in Zukunft ein Artikel, der sich mehr auf die Anwendung der Technologie konzentriert. Trotz allem: Ein paar kleine Tricks solltet ihr auch hierdurch an die Hand bekommen haben, wie sich CSS Farbverläufe einsetzen lassen.