Webdesign - Der Farbverlauf im Kopf der Seiten mit dem CSS Gradient

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie wurde der Farbverlauf am Anfang und Ende der Seiten realisiert?

25Feb2014

Der Farbverlauf im Kopf der Seiten mit dem CSS Gradient


Mit der CSS3 (Cascading Style Sheet)-Eigenschaft background: gradient erzeugt man einen Farbverlauf ohne dass ein Hintergrundbild verwendet werden muss. Es gibt dabei zwei verschiedene Arten von Farbverläufen, den geraden Farbverlauf (linear) und den kreisförmigen Farbverlauf (radial).
Diese Möglichkeit habe ich mir zu Nutze gemacht und den Kopf der Seite mit einem linearen Farbverlauf realisiert.

Die Richtung des Verlaufs kann dabei durch die Winkelangabe, zum Beispiel "90deg" oder "to right", verändert werden. Erfolgt keine Richtungsangabe, wird immer die Voreinstellung "180deg" oder "to bottom" gewählt, also ein Farbverlauf von oben nach unten.
Mit den "Color-Stops" sorgt man schließlich für Farbunterbrechungen auf dem Farbverlauf. Diese Color-Stops werden durch eine "%-Angabe" oder eine "px-Angabe" und einer zugehörigen Farbe festgelegt. Diese Farbe verläuft dann, bis zum nächsten Color-Stop, in die nächste Farbe über.

Hier zuerst ein paar Beispiele, in denen die unterschiedlichen Vereinfachungen dargestellt werden.
Ein linearer Farbverlauf mit der Angabe:

background: linear-gradient(180deg, #fff 0%, #777 100%)

Der gleiche lineare Farbverlauf aber ohne Richtungsangabe:

background: linear-gradient(#fff 0%, #777 100%)

Der gleiche lineare Farbverlauf aber ohne Richtungsangabe und ohne %-Angabe:

background: linear-gradient(#fff, #777)

Ein radialer, ellipsenförmiger Farbverlauf ohne Richtungsangabe und ohne Prozentangabe:

background: radial-gradient(#fff, #777)

Ein radialer, ellipsenförmiger Farbverlauf mit einem zusätzlichen Color-Stop bei 50%:

background: radial-gradient(#f00, #ff0 50%, #00f)

Ein linearer, wiederholender Farbverlauf mit einer %-Angabe für Color-Stop:

background: repeating-linear-gradient(45deg, #777 0%, #fff 10%)

Der gleiche lineare und wiederholende Farbverlauf mit einer px-Angabe für Color-Stop:

background: repeating-linear-gradient(45deg, #777, #fff 54px)

Und zum Schluss ein Farbverlauf mit den Farben des Regenbogen. Hierbei habe ich die Farben für rot, orange, gelb, grün, blau und violett angegeben:

background: linear-gradient(90deg, #f00 0%, #ffa500 20%, #ff0 40%, #008000 60%, #00f 80%, #800080 100%)

Verzichtet man auf die Prozentangaben, werden die Color-Stops gleichmäßig vom System verteilt:

background: linear-gradient(90deg, #f00, #ffa500, #ff0, #008000, #00f, #800080)

Kommen wir nun zu dem Farbverlauf am Anfang und Ende der Seiten.

Ich wollte einen Farbverlauf wie an meinem Radio erhalten, oben dunkel und nach unten heller werdend. Allerdings war die Farbe "schwarz" zu hart für das Aussehen der Webseiten, und so entschied ich mich als Ausgangsbasis für die Farbverteilung mit einem Rot-, Grün- und Blauanteil von jeweils 40% zu arbeiten.
Auf der Seite "Farbengenerator" (Bemerkung am 24.11.2016: leider ist diese Seite nicht mehr online) ergab dies den Hexadezimalcode #282828. Von dieser Farbe ausgehend habe ich die Helligkeit immer um 10% erhöht, und schließlich den folgenden Farbverlauf erhalten:

background: linear-gradient(#282828, #2c2c2c, #303030, #353535, #3a3a3a, #404040, #464646);

Damit aber das Aussehen an der oberen Kante einer Rundung nahekommt, habe ich durch Verteilung der Prozentangaben schließlich den folgenden Farbverlauf erhalten:

background: linear-gradient(#282828, #303030 5%, #353535 10%, #3a3a3a 15%, #404040 20%, #464646 25%, #464646);

Aber auch das kann wieder vereinfacht werden. Da ich von dem Farbcode "#282828" gleichmäßig heller geworden bin, benötige ich nur den Farbstopp bei 25% und erhalte den gleichen Farbverlauf:

background: linear-gradient(#282828, #464646 25%, #464646);

Und für das Ende der Seite werden die Angaben der Farben nur umgedreht:

background: linear-gradient(#464646, #464646 75%, #282828);

Auf die Angaben von 0% und 100% kann man, wie oben bereits erläutert, verzichten. Das Ergebnis kam meinen Vorstellungen schon sehr nahe.

Zum Seitenanfang springen Λ