Share
In diesem Lernprogramm erfahren Sie, wie Sie Farbverläufe im Web verwenden. Ich gebe Ihnen einige Beispiele, einige Übungen (wie zum Beispiel das Erstellen von Farbverläufen für Grenzen), und ich füge auch einige nützliche Ressourcen hinzu, die das Erstellen von Farbverläufen erheblich erleichtern.
In früheren Zeiten war es nicht wirklich möglich, Verläufe ohne Bilder zu verwenden, aber aufgrund von CSS-Entwicklungen ist es jetzt einfach und zuverlässig, Verläufe innerhalb unserer Stylesheets zu erstellen.
In ihrer einfachsten Form definieren wir Farbverläufe als Hintergrundbilder. Wir setzen das Hintergrundbild (nur mit der Abkürzung) Hintergrund ist absolut in Ordnung) als entweder a linearer Gradient oder ein radialer Gradient, dann passieren wir die Anfangs- und Endfarben:
.Feld Hintergrund: linearer Gradient (# 000046, # 1cb5e0);
Standardmäßig verläuft ein linearer Farbverlauf von oben nach unten. Dies gibt uns etwa Folgendes:
Wir können die Richtung ändern, indem Sie vor den Farben einen neuen Parameter hinzufügen, zum Beispiel:
.Feld Hintergrund: linearer Gradient (nach rechts, # 000046, # 1cb5e0);
Gleiches Ändern dieses Parameters in Lesen nach oben rechts würde einen diagonalen Farbverlauf erzeugen. Sie können diese Diagonale auch genau bestimmen, indem Sie etwas wie angeben 45 Grad (oder welchen Winkel Sie auch wählen).
Um einen Schritt weiter zu gehen, brauchen Sie nicht nur bei zwei Farben zu bleiben. Und Sie können auch Farbnamen wie folgt verwenden:
.Feld Hintergrund: linearer Farbverlauf (nach rechts, orange, # ec38bc, # 7303c0, Cyan);
In diesem Fall nimmt jede der vier Farben gleich viel Platz ein, sodass wir einen gleichmäßigen Verlauf erhalten.
Wenn die Verteilung nicht gleichmäßig sein soll, aber eine Farbe mehr Platz als eine andere beanspruchen soll, können Sie diesen Wert als Prozentsatz direkt nach der Farbe angeben:
.Kasten Hintergrund: linearer Gradient (nach rechts, # f05053 80%, # e1eec3);
Geben uns:
Wir können alles, was wir bisher gelernt haben, für die Anzeige verwenden radial Stattdessen Farbverläufe. Ausschalten linearer Gradient zum radialer Gradient ist alles was Sie hier tun müssen.
.Feld Hintergrund: Radialgradient (# fdbb2d, # 22c1c3);
Dieser radiale Verlauf erstreckt sich bis zu seinem übergeordneten Element, sodass dieses Rechteck mit einem ellipsenartigen Verlauf endet. Um diesen Farbverlauf so einzuschränken, dass er unabhängig von den Proportionen des übergeordneten Elements ein Kreis bleibt, können Sie das hinzufügen Kreis Stichwort wie folgt:
.Feld Hintergrund: Radialgradient (Kreis, # fdbb2d, # 22c1c3);
Wenn wir noch weiter gehen, können wir auch die Quelle des Kreisverlaufs angeben, so dass er zum Beispiel oben links im übergeordneten Element beginnt.
.Feld Hintergrund: Radialverlauf (Kreis oben links, # fdbb2d, # 22c1c3);
Der Effekt ist subtil, aber der Unterschied zwischen diesem und einem einfachen linearen Farbverlauf könnte genau das sein, wonach Sie suchen.
Wo können wir Steigungen auf interessante Weise einsetzen??
Hier ist ein Beispiel für eine Überlagerung, bei der der Verlauf leicht transparent ist (er wird verwendet) rgba Werte) und sitzt auf einem Foto.
Das Hintergrund Die Eigenschaft kann mehrere Werte annehmen, die einen Stapel bilden. Der erste Wert ist der oberste und der letzte Befund, der sich am unteren Rand des Stapels befindet. Wenn wir zuerst einen Verlauf definieren, wird er auf dem stehen, was wir hinterher definieren. Schauen Sie sich dieses Snippet an und sehen Sie, ob Sie herausfinden können, was passiert:
.Held Hintergrund: linearer Gradient (nach rechts, rgba (75, 123, 211, 0.5), rgba (22, 215, 177, 0.3)), URL (https: //bg.jpg);
Hier ist der resultierende Effekt:
Einen Farbverlauf auf Text zu haben, ist ein großer Effekt, wenn auch nicht in reinem Sinne. Stattdessen verlassen wir uns auf das Hintergrund-Clip Eigenschaft (und ihr vorangestelltes -Webkit-Hintergrund-Clip Freund), was ein bisschen Hack ist, aber sehr gut funktioniert.
Wir beginnen mit einem Stück Text (einer h1 in diesem Fall) und wenden Sie einen Farbverlauf an Hintergrund. Das Hintergrund-Clip Eigenschaft, gegeben einen Wert von Text, entfernt dann den Hintergrund vom gesamten Block mit Ausnahme des Bereichs hinter dem Text. Der Text Farbe verdeckt natürlich den Hintergrund, also machen wir es transparent um den Farbverlauf durchscheinen zu lassen:
h1 Hintergrundbild: linearer Gradient (nach rechts, # 0cebeb, # 20e3b2, # 29ffc6); -webkit-background-clip: text; Hintergrund-Clip: Text; Farbe: transparent;
Grenzverläufe sind etwas, was Sie vielleicht in Envato Elements gesehen haben, und sie sind eine großartige Möglichkeit, Ihre Benutzeroberfläche visuell aufzuwerten. Es ist subtil gemacht, aber schauen Sie sich den blau-violetten linearen Verlauf an den Rändern dieser Schaltflächen an:
Um diesen Effekt zu erreichen, gibt es einige Ansätze. Die erste beruht darauf, dass wir zuerst einem Element (Anker, Container, was auch immer) eine transparente Grenze geben. Dann wenden wir unseren Farbverlauf mit der Randbild Eigentum. Zum Schluss setzen wir Border-Image-Slice auf 1, damit der Farbverlauf die volle Umrandung der Grenze verwendet.
.card1 border: 5px solid transparent; border-image: linearer Gradient (nach unten, # 22c1c3, # fdbb2d); Border-Image-Slice: 1;
Hier ist das Ergebnis:
Bei diesem Ansatz gibt es jedoch einige Probleme. zuerst, Randbild wird nicht in allen Browsern, vor allem älteren Versionen von IE, allgemein unterstützt. Zweitens erlaubt dieser Ansatz nicht das Hinzufügen Grenzradius wie Sie in der Envato Elements-Benutzeroberfläche sehen. Schauen wir uns also einen alternativen Ansatz an.
Wir beginnen damit, dass wir unserem Div ein a geben Position: relativ. Wir fügen dann ein Pseudoelement hinzu und geben dieses ein Negativ absolute Position der von uns gewählten Randbreite (5px in diesem Fall):
.card2 :: after content: "; position: absolut; oben: -5px; unten: -5px; links: -5px; rechts: -5px;
Dies gibt uns einen festen Gradientenblock, der unser gesamtes div bedeckt. Hinzufügen eines z-index von -1 sorgt dafür, dass sich der Verlaufsblock hinter das div bewegt.
Als nächstes (Puh, es gibt viele Schritte für diese), fügen wir ein Grenzradius auf das Pseudoelement, das dem des übergeordneten Elements entspricht (lassen Sie uns jeweils 10px anwenden). Und dann geben wir den Eltern einen Hintergrund, was wir wollen; Das gleiche wie der Seitenhintergrund wird transparent erscheinen.
Zum Schluss wenden wir uns noch einmal an unseren Freund Hintergrund-Clip, Anwenden auf das übergeordnete Element und dieses Mal einen Wert von Polsterbox. Diese letzte Aktion stellt sicher, dass die div-Füllung bis zum Rand der Grenze verläuft und nicht weiter.
Daher ist dieser endgültige Ansatz keine Grenze im eigentlichen Sinne, sondern erlangt den Effekt, den wir suchen.
Ein dritter Ansatz ist möglich, diesmal mit Box Schatten um die Wirkung zu erzielen. Ich empfehle einen Blick auf Border-gradient mixin von John Grishin in CodePen, um zu sehen, wie das funktioniert.
Hier bitteschön! Diese Einführung zu CSS-Farbverläufen bietet Ihnen den Start, den Sie benötigen, und sehen Sie, wie Sie Farbverläufe im Web verwenden können. Wenn Sie andere kreative Anwendungen von Farbverläufen in freier Wildbahn gesehen haben, löschen Sie sie bitte im Kommentarbereich.
Accentsconagua