Farbverläufe
background-image oder background
Die Notation finde ich mal so vor und dann so. Was gilt nun? Anwendbar ist scheinbar beides. Ich konzentriere mich auf background:, damit background-image den Hintergrundbildern vorbehalten bleiben kann. Nachtrag (einige Wochen später): background: und background-image unterscheiden sich, in dem background-image sich so verhält, als wäre background-color: white als weitere Eigenschaft notiert. Somit wird eine andere Hintergrundfarbe überschrieben. Dies verdeutliche ich mit den Beispielen: JavaScript ► Anwendung / Praxis
Die Möglichkeiten, wie sie im <!selfhtml.wiki /> beschrieben sind - einfach toll. Empfehlen möchte ich auch w3schools. Was so alles geht! Wer weiß, ob man das nicht mal braucht.
Und natürlich auch ein wenig an den Schrauben dreht.
#schwarz_weiss { background: linear-gradient(white, black);}
#farblos_farb { background: linear-gradient(transparent, #069); }
#regenbogen { background: linear-gradient(
to bottom right,
red, orange, yellow, green, blue, indigo, violet); }
Und noch ein paar Beispiele
#rgba { background: linear-gradient(to right, rgba(255,255,0,1), rgba(0,0,0,0), rgba(255,0,0,1));}
#grad {background: radial-gradient(circle, red, yellow, green);}
#kreis {background: radial-gradient(red 5%, yellow 35%, green 60%);}
Und nun ist gut. Aber nicht wirklich. Werden im letzten Beispiel die prozentualen Werte auf über 100 gesetzt {background: radial-gradient(red 5%, yellow 60%, green 60%);}, nanu!!! Selbermachen!
webkit-text-fill-color und webkit-background-clip
Eigentlich wird hier Textgestaltung beschrieben. Mit color erhält Schrift ihre Farbgebung als Gestaltungsmittel.
Einen Farbverlauf einzusetzen, betrachte ich als dieses. Einen gedankenlosen Umgang mahne ich an. Nicht alles ist gut, nur weil es machbar ist. Es gibt aber gute Gelegenheiten, Farbverläufe auch für Überschriften oder großem Text innerhalb von Gestaltungskonstruktionen zu überlegen.
Firefox ist hier einmal wieder ein Problemkind. Wer den Browser auch bedenken will, muss ersatzweise auf ein SVG-Element ausweichen, weil die Attribute -webkit-text-fill-color: transparent; und -webkit-background-clip: text; nicht verarbeitet also gerendert werden. Somit bleibt die Textur auf den Hintergrund bezogen und der vorgesehene wird überschrieben.
Schrift mit einem Farbverlauf ...
Für Firefox bilde ich hier nur einmal den Ersatz durch ein SVG-Element ab. Andere Browser benötigen die Abbildung nicht.
Schrift über einem Farbverlauf
Die Schrift wird einfarbig angelegt und hat einen Farbwert, der im Verlauf des Hintergrundes vorkommt, also sich Ton in Ton verhält. Der Lesbarkeit ist es abträglich.Schrift mit einem Farbverlauf
Die Schrift erhält einen gegenläufigen Verlauf. Der Bereich der Farbübereinstimmung wird verringert, ist aber immernoch problematisch.Schrift mit einem Farbverlauf
Der Verlauf für die Schrift wird um seine helle und dunkle Farbewerte gespreizt. Der besseren Erkennbarkeit dient es schon, es reicht aber immer noch nicht.Schrift mit einem Farbverlauf
Die Schrift erhält weitere Farbwerte für den gegenläufigen Verlauf und setzt sich weiter vom Hintergrund ab. Ob das nun reicht?Schrift mit einem Farbverlauf
Der Einsatz von Farbverläufen für Überschriften oder gestaltetem Text ist genau zu überlegen.
Das kann schnell zu Beckers Bunter Bühne werden. Allerdings ist Farbigkeit noch nicht bunt. Es kommt halt immer darauf an, ob man sich dessen bewußt ist, was man macht!
Ein hahm mer noch - eine Wiederholung einer Wiederholung! Hier nun auf Verläufe angewendet.
Auf eine Ersatzdarstellung, wenn Firefox der Browser ist, möchte ich nicht verzichten.