Farbverläufe, egal ob in einem Grafikprogramm erstellt oder mit CSS realisiert, kennen wir alle. Meistens sind dabei zwei und manchmal auch mehrere Farben im Spiel. Du kannst aber in CSS auch einen Farbverlauf nur mit einer Farbe realisieren. Das geht ganz einfach mit den beiden CSS-Funktionen rgba()
und linear-gradient
. Hier ein einfaches Beispiel. Wenn du einer Box folgenden Wert für den Hintergrund vergibst:
background: linear-gradient(90deg, rgba(0,153,170,1) 0%, rgba(0,153,170,0.35) 55%);}
Dann bekommt sie folgenden Farbverlauf im Hintergrund:
Ein Farbverlauf mit nur einer Farbe
So in etwa habe ich den Farbverlauf hier auf dieser Website realisiert. Bei linear-gradient
gibt es drei Werte, die durch Kommata getrennt sind. Im ersten Wert gibst du den “Einstrahlungswinkel” an, der zweite Wert ist die Startfarbe und wo sie anfangen soll und der dritte Wert ist Gegenfarbe und ab welchen Bereich sie übernehmen soll.
Die Farben kannst du hier auf verschiedene Weisen notieren. Erlaubt sind u. a. hexadezimale, dezimale oder wie hier die rgba-Werte. Bei rgba()
gibt es vier Werte, die ebenfalls durch Kommata getrennt sind: Rot, Grün, Blau und Transparenzwert. Hier noch ein Beispiel, diesmal mit einer etwas helleren Farbe:
background: linear-gradient(90deg, rgba(230,227,211,1) 0%, rgba(230, 227, 211,0.45) 60%);}
Ein Farbverlauf mit nur einer Farbe
Der Vorteil bei dieser Vorgehensweise ist, dass du zwar einerseits, dass du ein farbliche Variation und Abwechslung im Design durch den Verlauf bekommst, aber du dir nicht die Gedanken machen musst, welche andere Farbe mit der Ersten harmonieren könnte. Sicherlich, es gibt etliche Farbkombinationen, die miteinander harmonieren, aber manchmal ist es schwierig und du findest keine Gegenfarbe, die dich wirklich überzeugt.
Du könntest damit aber auch etwas augenschonendere Hintergründe erstellen. Viele setzen auf Ihren Websites den Darkmode ein, aber nicht jeder mag es dunkel und zudem gibt es diverse Untersuchung, die zeigen, dass für viele Menschen dunkle Schrift auf hellem Hintergrund leichter zu lesen ist. Anstatt reines Weiß im Hintergrund könntest du einen hellen grauen Verlauf nehmen:
background: linear-gradient(90deg, #eee 0%, rgba(238,238,238,0.3) 45%);}
Ein Farbverlauf mit nur einer Farbe
In dem letzten Beispiel siehst du, dass du die Werte auch mischen kannst. Da ich beim ersten Wert keine Transparenz benötige, habe ich einfach den verkürzten hexadezimalen Wert angegeben; #eee
;
Weiterführende Links
- Infos auf SelfHTML zu rgba()
- Infos zu linear-gradient() auf SelfHTML
- Welche Farben passen zusammen?
- Studie zur Lesbarkeit: Effects of ambient illumination, contrast polarity, and letter size on text legibility under glance-like reading
PS: Wer jetzt mit “Hast du nix drauf, dann machste ‘’’nen Verlauf” in den Kommentaren kommt, der zahlt ein Litecoin in das Phrasen-Schwein. 🐖 😁
Image(s) licensed by Ingram Image/adpic.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
Cool – links zu SELFhtml – bin immer noch Mitglied.