Share
Farbverläufe machen ein hinterhältiges Comeback. Für eine Weile gehörten sie zur Welt von Miami Vice und Tequila Sunrise, dann fügten sie den 1980er-Zeitschriften mehr Tiefe hinzu, dann gab es Geocities-ok, lasst uns nicht auf die Vergangenheit eingehen.
Heutzutage werden Farbverläufe kühn im Internet verwendet. Mischen von hochgesättigten Farben für extrem satte Effekte (obwohl dies nicht jedermanns Geschmack ist).
Sieht aus, als würde jeder wieder einen diagonalen Farbverlauf verwenden, als wäre es 1995. Das gleiche auch (L: Stripe, R: Google). pic.twitter.com/j3cXyWo9tq
- Eli Schiff (@eli_schiff) 24. November 2015
Schauen wir uns ein paar Beispiele an, die ich kürzlich gesehen habe und ob wir uns davon inspirieren lassen.
Sie werden nicht überrascht sein, Spotify in dieser Liste zu sehen. Ihre Grafik der letzten sechs Monate wurde mit Duoton-Bildern und satten Farbverläufen gefüllt, die mit dem Year-in-Music-Feature abgeschlossen wurden.
In Kombination mit einem starken Typ klopft die Spotify-Marke im Moment nicht nur auf die Schulter, sondern hält Ihren Kopf gegen den Verstärker und erhöht die Lautstärke.
Einen ähnlichen Ansatz nutzte Atomic in seiner jüngsten Retrospektive zu Designartikeln von 2015.
Das Purpur und Fuchsia (um 45 Grad abgewinkelt) gibt hier eine schöne isometrische Tiefe und macht die Seite zu einem echten Spektakel.
realfuturefair.com verwendet eine ebenso spektakuläre Farbpalette, wiederum in einem diagonalen Winkel, mit einem generierte Wellengrafik:
Mein früherer Kollege Jeffrey Way hat sich horizontal bewegt und auf Laracasts.com ein dezentes Purpur für Indigo verwendet:
Verwenden Sie eine weniger retro-Ästhetik, anstatt ein halbopakes Verlaufsbild über dem Hintergrund der Hauptseite zu platzieren:
Dies hätte einfallsreicher getan werden können - das zusätzliche Image fügt der Seite eine weitere http-Anfrage und 75 KB hinzu -, aber es ist ein stilvoller Effekt.
Webkonferenz Der Web-Nachmittag verwendet einen wiederkehrenden blau-violetten Farbverlauf auf der Seite. Dies ist besonders wirksam, wenn die Schaltflächenränder wie folgt aussehen:
Bewegen Sie den Mauszeiger über den Link und der gesamte Hintergrund nimmt den Farbverlauf an. Wie wird das gemacht? Nach einigen grundlegenden Stilen erhält der Rand der Schaltfläche einen linearen Verlauf mit der Randbild Eigentum. Auf diese Weise können wir effektiv ein Bild auf den Rand werfen, anstatt uns auf den normalen Strich zu verlassen. Sie können jedoch die Eigenschaften des Standardrahmens festlegen zuerst um einen Fall zurückzulassen, wenn border-image nicht unterstützt wird.
Sie werden dann feststellen, dass auf die Eigenschaft border-image Folgendes folgt Border-Image-Slice: 1;. Dadurch wird festgelegt, wo das Hintergrundbild geschnitten wird, damit es mit dem Element skaliert werden kann. Der Wert 1 nimmt das erste Pixel entlang des linken, oberen, rechten und unteren Bilds des Farbverlaufs und ordnet diese Schnitte den acht Regionen der Grenze zu. Lesen Sie mehr zum Schneiden in MDN.
Dann wird für den Schwebeflugzustand derselbe Gradient auf die Hintergrundfüllung angewendet. Hier ist es in Aktion:
Bisher haben wir weiche Farbverläufe abgedeckt. zwei oder mehr Farben fließen entlang eines perfekten Übergangs ineinander. CSS macht diesen Prozess heutzutage relativ einfach und wartbar. Verläufe können aber auch in Form von Texturen dargestellt werden:
Auf worldseasiestdecision.org wird diese grobe Zeichnungstextur verwendet, um ihren Farbverläufen mehr Persönlichkeit zu verleihen. Gut gemacht.
www.viens-la.com verwendet auch Bilder (im Gegensatz zu CSS), um den Farbverläufen etwas Persönlichkeit zu verleihen:
Ein ähnlicher Gradient kann an allen Stellen wiederholt werden:
Farbverläufe sind nicht nur auf Hintergründe und Ränder beschränkt, sie können der Typografie auch ein interessantes Element hinzufügen:
Hier verwendet Pierre Georges einen Farbverlauf auf dem Hintergrund des Absatzblocks „Bonjour“ und dann den Hintergrund-Clip Eigenschaft, um die einzuschränken gemalt Bereich zum Text. -Webkit-Textfüllfarbe: transparent; macht dann den eigentlichen Text transparent, sodass der Verlauf von unten sichtbar ist.
So sieht die (Webkit) -Syntax aus:
p Hintergrundbild: -webkit-gradient (linear, links oben, rechts oben, Farbstopp (0, # f24a70), Farbstopp (0,5, # c557d8), Farbstopp (0,99, # f24a70)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
Brauchen Sie noch mehr Inspiration? Überprüfen Sie diese auf Envato Market verfügbaren Dateien:
Gradiente - Tumblr-Thema
RedRice - WordPress One-Page-Mehrzweckdesign
QuickEvents - Responsive Unbounce-Zielseite
Colormuse - Muse-Vorlage für eine Seite
Accentsconagua