Linearer CSS-Verlauf. Linear-gradient(): linearer Farbverlauf im Hintergrund. Legen Sie den Hintergrundfarbverlauf in HTML fest

dass es eine flexible Positionierung auf der Seite hat und mit Ebenen funktioniert. In Dynamic HTML wird dies als 2,5-dimensionaler Raum bezeichnet.

Aber jetzt zur Sache.

Hier ist ein Codeausschnitt:

Analyse dieses Fragments:

Nach dem „body“-Tag kommt das erste „div“-Tag – das öffnende, das die darunter liegende Ebene beschreibt und die Eigenschaft des jeweiligen „style“-Tags mit den Attributen enthält:

Position:absolut; - absolute Positionierung in einem Fenster mit Koordinaten:

- oben:0; links:0; Breite: 100 %; Höhe: 100 %;- oberer und linker Rand =0, Feldgröße 100 % in Breite und Höhe (Optionen sind hier möglich),

Visibility:visible – gibt den Befehl, das angegebene div-Tag sichtbar zu machen,

Z-index:-1 – bestimmt die Position des div-Tags im sogenannten 2,5-dimensionalen Raum der Seite, als unterstes.

Sie sollten auf das Z-Index-Attribut achten, das in diesem Fall die Position des durch dieses Tag beschriebenen Seitenabschnitts auf Ebene -1 bestimmt (hier kann es jeden Wert geben, der kleiner ist als die Werte der nächsten Ebenen). Es ist nur so, dass für mich die darunter liegende Ebene mit einer negativen Dimension verbunden ist, und das ist klarer.

Das Folgende ist ein Link zu einem Hintergrundbild mit einem Farbverlauf, einer Breite von 2 Pixeln und einer Höhe von 500 (meins in diesem Fall, obwohl es möglicherweise geringer ist). auf die Höhe Ihrer Seite gestreckt.

Nächstes Tag „div“ wird als Beispiel für die Organisation eines Seitenkopfes mithilfe dieses Tags angegeben. Es hat die Maße Seitenbreite, 200 px Höhe und ist in der angegebenen Farbe lackiert.

Hallo zusammen! Heute möchte ich ein wenig über Farbverläufe sprechen, über beliebte Websites, die Benutzern die Möglichkeit geben, sie auszuwählen und/oder zu generieren, sowie über einige Farbverläufe, die ich liebe und in verschiedenen Projekten verwende. Vielleicht gefallen sie auch einigen von euch.

Heutzutage wissen nur wenige Menschen nicht, was Farbverläufe sind und wie man sie in der Entwicklung verwendet. Glaubt man den Artikeln, dann ist die Verwendung von hellen und satten Farbverläufen im Jahr 2018 eine Art Trend.

Was ist ein Farbverlauf?

Erinnern wir uns nur zur Veranschaulichung daran, was ein Farbverlauf ist.

Der Gradient (von lateinisch gradiens, Geschlecht gradientis – Gehen, Wachsen) ist ein Vektor, dessen Richtung die Richtung des größten Anstiegs eines bestimmten Wertes (\displaystyle \varphi) \varphi angibt, dessen Wert sich von einem Punkt im Raum zum anderen ändert (Skalarfeld) und in der Größe (Modul) gleich der Wachstumsrate dieses Wertes in dieser Richtung

Farbverläufe werden in verschiedenen Bereichen verwendet, aber wir interessieren uns für den Bereich der Webentwicklung, wo Farbverläufe häufig als Haupthintergrund von Websites und verschiedenen Containern, Linien, Anführungszeichen, Blöcken und sogar Text verwendet werden.

Formular zum Schreiben von Farbverläufen in CSS

Werfen wir einen kurzen Blick darauf, woraus ein klassischer Farbverlauf besteht.

Der Farbverlauf kann auf zwei Arten geschrieben werden:

Hintergrund: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
Hintergrundbild: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);

Es liegt an Ihnen, zu entscheiden, welche Form der Aufzeichnung Sie verwenden möchten.

Im obigen Code haben wir angegeben drei Bedeutungen Eigenschaften Hintergrund:

• 1. Wie wird der Gradient sein? linearer Gradient- in diesem Fall ist es linear. In Zukunft werden wir im Artikel darüber sprechen.
• 2. Geben Sie die Steigung der Gradientenlinie an, die die Richtung des Gradienten anzeigt. Sie können die Richtung auf zwei Arten angeben: [<угол>| Zu<позиция>] , wobei der Winkel in gemessen wird Grad, also ein Grad, oder auf die zweite Art – durch Angabe der Position von und nach. Zum Beispiel, nach oben, nach rechts, nach links unten usw.
• Farbbedeutung #****** , wodurch der Farbverlauf gestartet und beendet wird.

Alle Werte werden durch Kommas getrennt und die Anzahl der Farben kann absolut beliebig sein, von zwei bis unendlich. Aber natürlich im Rahmen des Zumutbaren.

Farbverläufe schreiben

Die Verlaufsfarbe kann in jeder verfügbaren Notation geschrieben werden:

• Hex-Farbcode – #000000 oder abgekürzt #000;
• RGB-Farbcode - rgb(0, 0, 0);
• Farbname - Schwarz;
• HSL-Farbcode – hsl(0, 0 %, 0 %);

Sie können Farben auch als Prozentsatz angeben, indem Sie nach der Farbe hinzufügen % . Zum Beispiel, rgb(0, 0, 0) 0 %, rgb(255,255,255) 100 %.

Das sind alle Grundkenntnisse, die für die Verwendung von Farbverläufen in der Webentwicklung erforderlich sind. Aber wahrscheinlich weiß nicht jeder, dass Farbverläufe auch in anderen Fällen verwendet werden können. Im Folgenden geht es um sie.

Farbverläufe mit Bildern

Um einen kombinierten Farbverlauf mit einem Bild als Hintergrund aufzuzeichnen, können Sie andere Hintergrundeigenschaften verwenden. Schauen wir uns zwei Beispiele an:

Im ersten Beispiel haben wir einen Hintergrund mit Farbverlauf erstellt (Beispiel 1) und im zweiten Beispiel haben wir ein Bild hinzugefügt und unseren Farbverlauf darauf angewendet (Beispiel 2).

Farbverlauf für Text

• -webkit-text-fill-color kombiniert mit -webkit-background-clip

Beispiele:

Ähnliche Aktionen können durchgeführt werden, indem der Farbverlauf durch einen Link mit einem Bild ersetzt wird.

Beachten Sie vor allem, dass einige Eigenschaften nicht von allen Browserversionen unterstützt werden. Sie können die Kompatibilität auf der Website „Kann ich verwenden“ überprüfen

Kombinieren von CSS-Verläufen im Hintergrundmischmodus

Erst kürzlich wurden drei weitere neue CSS-Eigenschaften eingeführt, die in modernen Browsern recht gut unterstützt werden. Zu diesen Eigenschaften gehören:

• Hintergrund-Mischmodus, zum Mischen von Hintergrundbildern, Verläufen und Hintergrundfarben
• Mix-Misch-Modus, um Elemente über andere Elemente zu mischen und schließlich
• Isolierung, eine seltener verwendete Eigenschaft, wird im Mix-Blend-Modus zum Mischen von Elementen verwendet.

Lassen Sie uns ein wenig über den ersten sprechen.

Funktionen wie linearer-gradient(), radial-gradient(), Und Repeating-Linear-Gradient(), Repeating-Radial-Gradient() und andere Varianten bieten breite Unterstützung und eine standardisiertere Syntax in allen modernen Browsern. Die Hintergrundeigenschaft kann jedoch auch mehr als einen Farbverlauf enthalten, wobei jedes Merkmal durch ein Komma getrennt ist. Lea Verou demonstrierte beeindruckende Modelle – Muster, die mit dieser Technik erstellt werden können: vom Schachbrett über Ziegelsteine ​​bis hin zu Sternen. Aber jetzt, da wir über die Eigenschaft „background-blend-mode“ verfügen, können wir neue Verläufe und Muster erstellen. Beispiele unten.

Spektraler Hintergrund

Wenden wir drei Farbverläufe an, um einen Hintergrund mit nahezu dem gesamten Farbspektrum zu erstellen, das auf dem Monitor angezeigt werden kann.
.spektrum-hintergrund(
Hintergrund:
linearer Farbverlauf (rot, transparent),
linearer Farbverlauf (nach links oben, Limette, transparent),
linearer Farbverlauf (nach rechts oben, blau, transparent);
Hintergrundmischmodus: Bildschirm;
}

Und jetzt haben wir einen mehrfarbigen Hintergrund. Bisher war ein ähnlicher Effekt nur mit einem Bild möglich, dessen Gewicht mehrere zehn Kilobyte betrug. Aber wir haben diesen Effekt einfach über CSS in weniger als 200 Bytes reproduziert, ganz zu schweigen von der Speicherung der HTTP-Anfrage.

Erstellen einer Decke mit CSS

Mit dem Hintergrundmischmodus können wir auch interessante Muster mit Farbverläufen erstellen.
.plaid-background(
Hintergrund:
wiederholender-linearer-gradient(
-45 Grad,
transparent 0,
transparent 25 %,
dodgeblue 0,
Dodgeblue 50 %
),
wiederholender-linearer-gradient(
45 Grad,
transparent 0,
transparent 25 %,
Tomate 0,
Tomate 50 %
),
wiederholender-linearer-gradient(
transparent 0,
transparent 25 %,
Gold 0,
Gold 50 %
), Weiß;


}

Am Ende haben wir Folgendes bekommen:

Website-Hintergrund mit Kreisen

Wie wäre es mit einem anderen, diesmal mit einem radialen Farbverlauf:
.circles-hintergrund(
Hintergrund:
radialer Gradient(
Khaki 40px,
transparent 0,
transparent 100%
),
radialer Gradient(
himmelblau 40px,
transparent 0,
transparent 100%
),
radialer Gradient(
rosa 40px,
transparent 0,
transparent 100%
), Schnee;
Hintergrundmischmodus: multiplizieren;
Hintergrundgröße: 100px 100px;
Hintergrundposition: 0 0, 33px 33px, -33px -33px;
}

Das Ergebnis übertrifft alle Erwartungen,

Nachtsichteffekt

Versuchen wir nun, mit CSS-Mischmodi einen weiteren Effekt nachzubilden und das Foto so aussehen zu lassen, als würden wir es durch die Linse einer Nachtsichtbrille betrachten.

Machen wir ein normales Bild


und wenden Sie einen radialen Farbverlauf und den Farbverlauf an, mit dem wir das Plaid darauf erstellt haben - sich wiederholender linearer Gradient
.Nachtsichteffekt (
Hintergrund:
URL (https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg),
radialer Gradient(
rgba(0,255,0,.8),
Schwarz
),
wiederholender-linearer-gradient(
transparent 0,
rgba(0,0,0,.2) 3px,
transparent 6px
);
Hintergrundmischungsmodus: Overlay;
Hintergrundgröße: Cover;
}

CSS-Verlauf stellt Übergänge von einer Farbe zur anderen dar.

Verläufe werden mit den Funktionen linear-gradient() und radial-gradient() erstellt.

Der Verlaufshintergrund kann in den Eigenschaften „Hintergrund“, „Hintergrundbild“, „Rahmenbild“ und „Listenstil-Bild“ festgelegt werden.

So erstellen Sie einen Farbverlauf in CSS

Browserunterstützung

IE: 10.0
Feuerfuchs: 16, 3,6 -moz-
Chrom: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -Webkit-
Oper: 12.1, 11.1 -o-
iOS-Safari: 7.1
Opera Mini: —
Android-Browser: 4.4, 4.1 -Webkit-
Chrome für Android: 44

1. Linearer Gradient linear-gradient()

Reis. 1. Verlaufslinie, Start- und Endpunkte und Verlaufswinkel

Linearer Farbverlauf erstellt mit zwei oder mehr Farben, für die eine Richtung angegeben ist, oder Farbverlaufslinie.

Wenn die Richtung nicht angegeben ist, wird der Standardwert verwendet - von oben nach unten.

Standardmäßig werden Verlaufsfarben gleichmäßig in einer Richtung senkrecht zur Verlaufslinie verteilt.

Hintergrund: linearer Farbverlauf (Winkel/Seite oder Neigung nach Schlüsselwort (Schlüsselwortpaar), erste Farbe, zweite Farbe usw.);

Richtung Der Gradient kann auf zwei Arten angegeben werden:
mit Neigungswinkel in Grad Grad, dessen Wert den Neigungswinkel der Linie innerhalb des Elements bestimmt.

Div (Höhe: 200px; Hintergrund: linear-gradient(45deg, #EECFBA, #C5DDE8); )

mithilfe von Schlüsselwörtern nach oben, nach rechts, nach unten, nach links, was jeweils einem Steigungswinkel von 0 Grad, 90 Grad, 180 Grad und 270 Grad entspricht.

Div ( Höhe: 200 Pixel; Hintergrund: linearer Farbverlauf (nach rechts, #F6EFD2, #CEAD78); )

Wenn die Richtung durch ein Schlüsselwortpaar angegeben wird, beispielsweise to top left , dann liegt der Startpunkt des Farbverlaufs in der entgegengesetzten Richtung, in diesem Fall unten rechts.

Div (Höhe: 200px; Hintergrund: linearer Farbverlauf (oben links, puderblau, rosa);)

Bei einer ungleichmäßigen Farbverteilung wird die Startposition jeder Farbe durch die Stopppunkte des Farbverlaufs, die sogenannten, angezeigt Die Farbe hört auf. Haltepunkte werden in % angegeben, wobei 0 % der Startpunkt und 100 % der Endpunkt ist, zum Beispiel:

Div (Höhe: 200 Pixel; Hintergrund: linearer Farbverlauf (nach oben, #E4AF9D 20 %, #E4E4D8 50 %, #A19887 80 %); )

Für eine klare Verteilung der Farbstreifen muss jede nachfolgende Farbe am Haltepunkt der vorherigen Farbe beginnen:

Div (Höhe: 200 Pixel; Hintergrund: linearer Farbverlauf (nach rechts, #FFDDD6 20 %, #FFF9ED 20 %, #FFF9ED 80 %, #DBDBDB 80 %); )

2. Radialer Gradient radial-gradient()

Radialer Farbverlauf Der Unterschied zum linearen Modus besteht darin, dass die Farben von einem Punkt (der Mitte des Farbverlaufs) ausgehen und gleichmäßig nach außen verteilt werden, wodurch die Form eines Kreises oder einer Ellipse entsteht.

Hintergrund: radialer Farbverlauf (Farbverlaufsform/-größe/Mittelposition, erste Farbe, zweite Farbe usw.);

Verlaufsform definiert durch die Schlüsselwörter „circle“ oder „ellipse“. Wenn keine Form angegeben ist, ist der radiale Farbverlauf standardmäßig eine Ellipsenform.

Div (Höhe: 200px; Hintergrund: radial-gradient(white, #FFA9A1); )

Mittelposition wird mithilfe der Schlüsselwörter angegeben, die in der Eigenschaft „background-position“ verwendet werden, gefolgt vom Präfix „at“. Wenn die Mittelposition nicht angegeben ist, wird der Standardwert in der Mitte verwendet.

Div (Höhe: 200px; Hintergrund: radial-gradient(at top, #FEFFFF, #A7CECC); )

Ein Wertepaar, angegeben in den Längeneinheiten % , em oder px, kann die Größe des elliptischen Farbverlaufs steuern. Der erste Wert gibt die Breite der Ellipse an, der zweite die Höhe.

Div (Höhe: 200px; Hintergrund: radial-gradient(40% 50%, #FAECD5, #CAE4D8); )

Verlaufsgröße mithilfe von Schlüsselwörtern spezifiziert. Der Standardwert ist die am weitesten entfernte Ecke.

div (Höhe: 200px; Hintergrund: radialer Farbverlauf(Kreis am weitesten entfernte Ecke bei 100px 50px, #FBF2EB, #352A3B); )

Mithilfe eines radialen Farbverlaufs können Sie realistische dreidimensionale Formen wie Kugeln und Knöpfe erstellen.

Ball

div ( Breite: 200 Pixel; Höhe: 200 Pixel; Randradius: 50 %; Rand: 0 automatisch; Hintergrund: radialer Farbverlauf (Kreis bei 65 % 15 %, Aqua, Dunkelblau); )

Taste

.wrap ( Höhe: 200px; Polsterung: 50px 0; Hintergrund: #cccccc; ) .button ( Breite: 100px; Höhe: 100px; Randradius: 50%; Rand: 0 automatisch; Hintergrund: radial-gradient(am weitesten entfernte Seite Ellipse oben links, weiß, #aaaaaa); box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5); )

Briefmarke

Mit transparenten Farben in Farbverläufen können Sie solche Effekte erzielen.

Jpg">