Farblich angepasst: Mit CSS Gradient für bunte Vielfalt!

Möchtest Du einen ästhetisch ansprechenden Hintergrund für Deine Webseite haben? Dann kann Dir CSS Gradient während der Arbeit am Laptop beim Programmieren helfen. Worum genau handelt es sich dabei? Wofür nutzt man es im Einzelnen? Und wie wendet man es an?

Was ist ein CSS Gradient?

Der Eingabebefehl CSS Gradient dient Designern dazu, dynamische visuelle Effekte in Webseiten zu erzeugen. Wie die Bezeichnung bereits Aufschluss gibt, verwendet man CSS Gradient (zu Deutsch: Farbverlauf), um Farbverläufe, Schattierungen und andere visuelle Effekte hinzuzufügen. Dabei kann man auf tatsächliche Bilder verzichtet. Daher ist man in der Lage, CSS Gradienten auf jede Art von Hintergründen, Schaltflächen, Texten und vieles mehr anzuwenden.

Obwohl CSS Gradienten mithilfe eines CSS-Codes erzeugt werden, stellen sie keine CSS-Eigenschaft dar. Das heißt, mit diesem Begriff kann man zum Beispiel nicht die CSS-Eigenschaft color ersetzen.

Mit ihnen definiert man eine Reihe Übergängen zwischen Farben, zum Beispiel die Richtungen und Winkel von Farbverläufen zweier oder mehrerer Farben. Diese Übergänge sind in der Regel weich und mischend. Standardmäßig wird ein Farbverlauf von links nach rechts erstellt, aber Du kannst die Richtung des Farbverlaufs mit der CSS-Eigenschaft background-image ändern.

Der Code kann in einem HTML- oder CSS-Dokument geschrieben werden, um den gewünschten Gradienten zu erzeugen. Es ist aber auch möglich, vordefinierte gradientfähige Vorlagen zu verwenden, um die Erstellung von Gradienten zu vereinfachen.

Der Gebrauch von CSS Gradienten stellt daher eine nützliche Technik dar, um Webseiten dynamischer und visuell ansprechender zu gestalten. Sie sind einfach zu erstellen und ermöglichen Designern, ihren Webseiten ein einzigartiges und modernes Aussehen zu verleihen.

Welche Arten von CSS Gradient gibt es?

Die Farbverläufe für Hintergründe werden mithilfe der Eingabe background-image: gradient bzw. background: gradient konzipiert. Hierbei kann man mehrere Farben miteinander kombinieren und auf unterschiedliche Weise gestalten. Welche Arten der Gestaltung sind mit diesem Befehl in einem CSS-Code möglich?

Die Gestaltung der Hintergründe läuft über die Werteinstellung. Insgesamt gibt es drei Typen, die man unterscheiden kann:

  • linear-gradient (gerade Farbverläufe, ähneln Streifen – sowohl senk- als auch waagerecht möglich)
  • radial-gradient (runde Farbverläufe, ähneln Kreisen)
  • conic-gradient (konische Farbverläufe)

In diesem Zusammenhang gilt weiterhin:

  • Horizontale Gradienten starten in der Regel an der linken Seite eines Elements und ändern sich allmählich nach rechts; vertikale Gradienten ändern sich von oben nach unten.
  • Radiale Gradienten beginnen an der Mitte des Elements und breiten sich nach außen aus.
  • Konische Gradienten werden verwendet, um einen ovalen Verlauf zu erzeugen und starten, ähnlich wie radiale Gradienten, im Elementzentrum.

Wie verwendet man CSS Gradient für sich?

Die allgemeine Eingabe ohne spezifischen Typen sieht für einen CSS Gradienten folgendermaßen aus:

background-image: gradient(<direction>, <color-stop1>, <color-stop2>, …);

Die Norm ist, dass der Farbverlauf von links nach rechts passiert. Solltest Du diesen aber mit der Eingabe der Richtung (<direction>) ändern wollen, gibt es mehrere Möglichkeiten, die Du mithilfe der folgenden Werte einsetzen kannst: left to right (links nach rechts), right to left (rechts nach links), top to bottom (oben nach unten) und bottom to top (unten nach oben).

Solltest Du zum Beispiel von der rechten oberen Kante aus einen Farbverlauf gestalten wollen, kannst Du alternativ auch Gradzahlen für Winkel angeben. Für einen Winkel, wie er eben genannt wurde, wären das zum Beispiel 45° (als 45deg im Code geschrieben).

Die Farben, zu denen Du Übergänge schaffst, können entweder als HEX-Werte oder als RGB-Werte angegeben werden. Sie werden mithilfe der Eingabe von <color-stop1> … geregelt. Was hat es mit den Color-Stops auf such?

Du kannst einem Farbverlauf mehrere sogenannte color stops (zu Deutsch: Farbunterbrechungen) hinzufügen. Dies geschieht über die Verwendung der CSS-Eigenschaft background-image. Gib dazu einfach mehrere, durch Kommas getrennte background-color-Werte an. Der Wert „Rot, Blau“ erzeugt zum Beispiel einen Farbverlauf, der von Rot nach Blau übergeht.

Die Intensität des Farbverlaufs kann mit der Eigenschaft background-size gesteuert werden. Der erste Wert ist hierbei der Startpunkt des Gradienten; der zweite Wert der Endpunkt. Beispielsweise erzeugt ein Wert von „0 0“ einen vollständig transparenten Farbverlauf, während ein Wert von „1 1“ einen vollständig undurchsichtigen Farbverlauf erzeugt.

Währenddessen wird die Position des Farbverlaufs mit der Eigenschaft background-position kontrolliert. Hierbei gilt: Der erste Wert ist die horizontale, der zweite Wert die vertikale Position. So erzeugt ein Wert von „0 0“ zum Beispiel einen Farbverlauf, der oben links beginnt, während ein Wert von „1 1“ einen Farbverlauf erstellt, der unten rechts beginnt.

Beispiele

Hier ist ein Beispiel für einen CSS Gradienten, der einen horizontalen Übergang von Schwarz nach Weiß erzeugt:

background-image: linear-gradient(left to right, black, white);

Und hier ist ein Beispiel für einen CSS Gradienten, der einen vertikalen Übergang von Rot nach Blau erzeugt:

background-image: linear-gradient(top to bottom, red, blue);

Auf einen Blick

Ein CSS Gradient ist ein Eingabebefehl im CSS-Code, der Farbverläufe für Hintergründe und Ähnliches auf Webseiten regelt. Er wird demnach – ähnlich wie CSS Animation – zur Gestaltung im Webdesign genutzt und ist ein wichtiger Bestandteil der Programmiersprache.

Man kann im Rahmen der Eingabe die Richtung, die Position sowie die Intensivität der Farbverläufe von zwei und mehreren Farben individuell steuern.

FAQ zu CSS Gradient

Was ist ein Gradient in CSS?

Dieser Eingabebefehl wird genutzt, um Farbverläufe zu gestalten – meist in Hintergründen. Hierbei können zwei und mehr Farben miteinander kombiniert werden.

Wie wechselt man einen Gradient in CSS?

Das ist nicht möglich. Die Farbverlaufe laufen quasi übergangslos hintereinander ab.

Kann man mehrere Farbverläufe in einem Element erstellen?

Das ist möglich, ja.

Schreibe einen Kommentar