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.