Webdesign Trends — Verläufe
Vor nicht allzulanger Zeit noch verpönt, jetzt wieder top aktuell: Verläufe im Webdesign — auch und gerade in knalligen Farben.
zuerst erschienen am 01. Juni 2020
Schon 2019 zeichnete sich ab, dass Verläufe wieder "salonfähig" werden. Vor allem dürfte die immer bessere Unterstützung der Browser hier Anteil daran haben, dass Verläufe auf immer mehr aktuellen Webseiten zu finden sind. Sowie natürlich der notorische Drang aller (Web-)Designer, immer mal wieder was Neues für sich zu entdecken; sonst wird's über die Jahre aber auch echt öde.
Wir haben unter einfaches-cms.de diesen Trend Mitte 2019 aufgegriffen und finden auch mit etwas Abstand noch: Das funktioniert tatsächlich! Die Verläufe geben großen Hintergrundflächen eine gewisse Dynamik und vor allem kommen auf einmal Farben in Frage, die "flächig" undenkbar wären. Peppig, frisch, macht Spaß.
Den schönsten Effekt — in unseren Augen — ergeben dabei jeweils noch ausgefeilte Winkel, in dem der Verlauf verläuft. Der petrolfarbene Verlauf des obersten Elements von einfaches-cms.de sieht dann im CSS so aus:
#00BCD4;
linear-gradient(7deg, #123, transparent);
Hier wird zuerst eine Hintergrundfarbe gesetzt und dann — mit 7° Neigung — ein Verlauf von einem dunklen Grau zu Transparenz darüber gelegt. Dieses Vorgehen hat den Vorteil, dass zumindest die Hintergrundfarbe funktioniert, falls die Seite in einem (veralteten) Browser ohne Unterstützung für Verläufe aufgerufen wird.
Es sind übrigens auch mehrere "Sprungpunkte" bei Verläufen möglich, auch ein Regenbogen wäre also relativ einfach realisierbar. Oder ein Schachbrett? Das typische Symbol für Transparenz im CSS-Code oben ist auch aus Verläufen aufgebaut:
span.color.transparent {
linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
6px 6px;
0 0, 0 3px, 3px -3px, -3px 0px;
}
Leider noch nicht in allen Browsern verfügbar, aber auch ein möglicher Einsatzort:
Ein Verlauf als Textfarbe
(wenn die Überschrift und dieser Text bei Ihnen keinen Verlauf zeigt, ist Ihr Browser leider in der Fraktion der Verweigerer... ;)
Etwas komplizierter, aber auch kein Hexenwerk — im CSS wird neben dem "background-image" (was natürlich auch statt Verlauf tatsächlich ein Bild sein kann) noch folgendes ergänzt:
text;
transparent;
Mit den "Entwicklertools", die es mittlerweile in allen Browsern gibt, lassen sich übrigens CSS-Regeln sehr einfach direkt anpassen, für Farben gibt es dabei praktischerweise auch einen Farbwähler. So kann man etwa den Verlauf so lange anpassen, bis er einem gefällt und muss danach nur noch das CSS per Copy & Paste in die eigene CSS-Datei einfügen.
Das funktioniert im einfachen CMS metatag® sogar "inline" beim Bearbeiten: Für ausgefallenere Formatierungen, wie etwa den Textverlauf oben, einfach in den Entwicklertools das gewünschte Element beim Bearbeiten auswählen und dort anpassen.
Der CSS-Code wird dann als sog. "inline style" direkt beim HTML-Element eingefügt. Für Sonderfälle spricht unserer Ansicht nach nichts dagegen, bei mehreren Anwendungen der gleichen Formatierung empfiehlt sich aber natürlich der Weg über eine Klasse und deren Definition in der CSS-Datei.
Und wie immer gilt: Selbstverständlich können wir Ihnen die Arbeit mit dem CSS-Code abnehmen, damit Sie nur noch ganz einfach Objekten Klassen zuweisen müssen.