CSS: Linearer Farbverlauf für den Hintergrund. Lineargradient (): Linearer Gradient im Hintergrund

Gradient - Füllen des ausgewählten Bereichs mit einer Folge von Farbnuancen mit glatten Übergängen zwischen ihnen. Der Gradienten dient zum Anzeigen eines reibungslosen Übergangs zwischen zwei oder mehr angegebenen Farbschirmen. Beispiel für einen Gradienten:

Bisher wurden Hintergrundbilder verwendet, um einen Gradienteneffekt zu erzeugen. Jetzt können Sie CSS3 verwenden, um einen Gradientenhintergrund zu erstellen. Elemente mit CSS3-Gradienten sind besser, um besser auszusehen, wenn sie zunehmen als ihre Analoga - verbundene Hintergrundbilder, da der Gradienten von einem Browser direkt unter dem angegebenen Bereich erzeugt wird.

Bitte beachten Sie, dass der CSS-Gradienten ein vom Browser erstelltes Hintergrundbild ist, und nicht eine Hintergrundfarbe, sodass sie als der Wert der Hintergrundbilder-Eigenschaft definiert ist. Dies bedeutet, dass der Gradienten nicht nur als Wert der Hintergrundbilder-Eigenschaft angegeben werden kann, sondern auch überall dort, wo Sie das Hintergrundbild einfügen können, beispielsweise in das List-Stil-Image und den Hintergrund.

CSS3 definiert zwei Arten von Gradienten:

• Linearer Farbverlauf (Linearer Gradient) - ein reibungsloser Übergang von der Farbe in einer geraden Linie.
• Radialer Farbverlauf (Radialgradient) - ein reibungsloser Übergang von der Farbe von einer Farbe von einem Punkt in allen Richtungen.

Linearer Farbverlauf

Ein linearer Gradient breitet sich in einer geraden Linie aus und zeigt einen reibungslosen Übergang von einem Farbton zu einem anderen. Mit der Funktion linearer Gradienten () wird ein linearer Gradienten erstellt. Die Funktion erstellt ein Bild, das ein linearer Gradient zwischen den angegebenen Farben ist. Die Größe des Gradienten entspricht der Größe des Elements, auf das er angewendet wird.

Die Funktion linear-Gradienten () nimmt die folgenden Semikolons, Argumente:

• Als erstes Argument gibt es einen Grad von Winkel oder Keywords, die die Richtung der Gradientenleitungsrichtung bestimmen. Optionales Argument.
• Die Liste der gemeinsam genutzten Liste, bestehend aus zwei oder mehr Farben, für die jeder der Anschlagposition folgen kann.

Der einfachste lineare Gradienten erfordert nur zwei Argumente, die die Anfangs- und Endfarbe definieren:

Div (schwarz, weiß); Breite: 200px; Höhe: 200px;) Versuchen »

Wenn die Funktion zweier Argumente übertragen wird, wird ein vertikaler Gradienten mit einem Anfangspunkt von oben installiert.

Die Richtung der Gradientenlinie kann auf zwei Arten bestimmt werden:

Die Verwendung von Grad als das erste Argument kann übertragen werden, um den Winkel der Gradientenlinie zu übertragen, was die Richtung des Gradienten bestimmt, beispielsweise der Winkel 0DEG (DEG aus dem England-Grad - Grad) bestimmt die Gradientenlinie von der Unterseite des Elements nach oben, der Winkel 90DEG, bestimmt die Gradientenleitung, die rechts hinterlassen wird und usw. Einfach packen, positive Winkel sind Rotation im Uhrzeigersinn, negativ gegenüber der Uhr. Verwenden von Keywords, da das erste Argument den Schlüsselwörtern "to top", "nach rechts", "nach unten" oder "nach links" übertragen, sind sie die Winkel der Gradienten "0DEG" "90DEG" "180DEG" "270DEG" beziehungsweise.

Sie können den Winkel auch mit zwei Keywords einstellen, beispielsweise nach oben rechts - die Gradientenzeile ist auf den oberen rechten Winkel gerichtet.

Beispiel für einen in verschiedene Richtungen angegebenen Gradienten:

Div (Marge: 10px; Breite: 200px; Höhe: 200px; Float: links;) #one (nach links, schwarz, rot);) #two (Hintergrundbild: Linear-Gradient (nach oben links, schwarz, rot) )) #three (Hintergrundbild: Lineargradient (65 °, schwarz, gelb);) versuchen

Wie bereits erwähnt, kann ein linearer Gradient eine Liste von mehr als zwei Farben enthalten, die durch das Komma getrennt sind, der Browser wird sie gleichmäßig in der gesamten verfügbaren Stelle verteilen:

Div (Marge: 10px; Breite: 200px; Höhe: 200px; Schwimmer: links;) #ein (Hintergrund-Bild: Linear-Gradient (nach rechts, rot, blau, gelb);) #two (Hintergrundbild: linear- Gradient (nach oben links, blau, weiß, blau);) versuchen Sie »

Nach der Farbe darf er die Stoppposition dafür angeben, wodurch der Ort der Farbe bestimmt wird (wobei sich eine Farbe in einem anderen bewegt, relativ zu dem Anfangs- und Endpunkt des Gradienten. Die Stoppposition wird mit Hilfe von Messeinheiten angezeigt, die in CSS oder um Prozent unterstützt werden. Bei der Verwendung von Zinsen wird der Ort der Stoppposition in Abhängigkeit von der Länge der Gradientenleitung berechnet. Der Wert von 0% ist der Anfangspunkt des Gradienten, 100% - der endgültige.

Div (Marge: 10px; Breite: 200px; Höhe: 200px; Float: links;) #one (Hintergrundbild: Linear-Gradient (nach oben rechts, blau, weiß 70%, blau);) #two (Hintergrundbild : Lineargradient (nach rechts unten, gelb 10%, weiß, rot, schwarz 90%);) #three (nach rechts, schwarz 10%, gelb, schwarz 90%);)

Der Farbwert kann angegeben werden verschiedene WegeBeispiel: Geben Sie den Farbnamen an, verwenden Sie Hexadezimalwerte (Hex) mithilfe von RGB (RGBA) oder HSL (HSLA) -Syntax. Zum Beispiel kann die Verwendung eines Gradienten mit Transparenz in Verbindung mit einer Hintergrundfarbe oder einem im Rahmen eines Gradienten befindlichen Bildes verwendet werden, um interessante visuelle Effekte zu erzeugen:

Div (Marge: 10px; Breite: 300px; Höhe: 100px; Hintergrundfarbe: Grün;) #one (Hintergrund: Lineargradient (nach links, RGB (255,255,0), RGBA (255,255,0,0,0) );) #two (Hintergrund: Lineargradient (RGB (255,255,255), RGBA (255,255,255,0));););););)

Vlad Merzehevich.

Der Gradient wird als reibungsloser Übergang von einer Farbe zum anderen bezeichnet, und es gibt mehrere Farben und Übergänge zwischen ihnen. Mit Hilfe von Gradienten werden die meisten bizarren Effekte von Webdesign erstellt, wie Pseudo-Dimension, Blendung, Hintergrund usw. auch mit einem Gradienten, Elemente, die eher hübscher aussehen als ein-Photon.

Es gibt keine separate Eigenschaften, um einen Gradienten hinzuzufügen, da er als Hintergrundbild angesehen wird, daher durch die Hintergrundbildereigenschaft oder die universelle Eigenschaft des Hintergrunds hinzugefügt, wie in Beispiel 1 gezeigt.

Beispiel 1. Gradient.

Hier beginnt das umgebende Idiom traditionell für ein prosaisches Image, aber das Sprachspiel führt nicht zu einem Active-Dialog-Verständnis.

Ergebnis dieses Beispiel In FIG. einer.

Feige. 1. Linearer Farbverlauf für Absatz

Im einfachsten Fall mit zwei Farben, die in Beispiel 1 gezeigt wurden, wird die Position zunächst geschrieben, aus der der Gradienten beginnt, dann die Anfangs- und Endfarbe.

Um Positionen zu schreiben, wird zuerst geschrieben, und dann Keywords oben, unten und links, rechts, sowie ihre Kombinationen werden hinzugefügt. Die Reihenfolge der Wörter ist nicht wichtig, Sie können auf die linke Oberseite oder nach oben links schreiben. Auf der Registerkarte. Fig. 1 zeigt verschiedene Positionen und Art des Gradienten, der für # 000 und #FFF-Farben, anders aus schwarz bis weiß erhalten wird.

Tabelle. 1. Arten von Gradienten

Position		Beschreibung	Aussicht
nach oben	0deg.	Aufwärts.
nach links.	270DEG.	Von rechts nach links.
unten	180deg.	Von oben nach unten.
nach rechts	90deg	Von links nach rechts.
nach oben links.		Von der rechten unteren Ecke bis zur linken Oberseite.
nach oben rechts		Von der linken linken Ecke nach rechts.
nach unten links.		Vom rechten oberen Winkel nach links unten.
unten rechts		Von der oberen linken Ecke bis zum rechten Unterseite.

Anstelle eines Schlüsselworts darf er den Neigungswinkel der Gradientenlinie einstellen, der die Richtung des Gradienten zeigt. Zunächst wird ein positiver oder negativer Winkelwert geschrieben, dann wird DEG hinzugefügt.

Nullgrade (oder 360 °) entsprechen dem Gradienten von unten nach oben, dann wird der Countdown im Uhrzeigersinn durchgeführt. Der Countdown des Neigungswinkels der Gradientenleitung ist unten gezeigt.

Für den Wert von oben links und es ist ähnlich dem Neigungswinkel der Gradientenleitung, basierend auf der Größe des Elements, um zwei diagonal gegenüberliegende Winkelpunkte zu verbinden.

Es reicht nicht aus, komplexe Gradienten von zwei Farben zu erstellen. Die Syntax ermöglicht es Ihnen, ihre unbegrenzte Menge hinzuzufügen, um die Farben durch das Komma anzuheben. Sie können eine transparente Farbe verwenden (Schlüsselwort transparent) sowie durchscheinend mit rGBA-Format.Wie in Beispiel 2 gezeigt.

Beispiel 2. Transluzente Farben

HTML5 CSS3 IE 9 IE 10 CR OP OP SA FX

Das Ergebnis dieses Beispiels ist in Fig. 4 gezeigt. 2

Feige. 2. Gradient mit transluzenten Blumen

Um Farben im Gradienten genau zu positionieren, weist der Farbwert seine Position in Prozent, Pixel oder anderen Einheiten an. Zum Beispiel schreiben rot 0%, orange 50%, gelb 100% Dies bedeutet, dass der Gradienten mit rotem Beginn beginnt, dann werden 50% in Orange und dann bis zum Ende gelb. Zur Vereinfachung können extreme Einheiten wie 0% und 100% nicht geschrieben werden, sie sind standardmäßig gemeint. In Beispiel 3 wird gezeigt, dass es einen Gradientenknopf erzeugt, in dem die Position der zweiten Farbe von drei als 36% eingestellt ist.

Beispiel 3. Gradientenknopf

HTML5 CSS3 IE 9 IE 10 CR OP OP SA FX

Drücke mich weich

Das Ergebnis dieses Beispiels ist in Fig. 4 gezeigt. 3.

Feige. 3. Gradient-Taste.

Aufgrund der Aufgabe der Farbposition können Sie scharfe Übergänge zwischen Farben erhalten, was letztendlich einen Satz von monochromen Streifen ergibt. Für zwei Farben ist es für zwei Farben erforderlich, vier Farben anzugeben, die ersten beiden Farben sind gleich und beginnen von 0% bis 50%, die verbleibenden Farben sind auch gleich ineinander und halten von 50% bis 100%. In Beispiel werden 4 Streifen als Webseitenhintergrund hinzugefügt. Aufgrund der Tatsache, dass die extremen Werte automatisch ersetzt werden, können Sie sie nicht angeben, daher reicht es aus, nur zwei Farben zu schreiben.

Beispiel 4. Monotonische Streifen

HTML5 CSS3 IE 9 IE 10 CR OP OP SA FX

Typische europäische Bourgeosität und Integrität wird von der Amtssprache elegant veranschaulicht.

Das Ergebnis dieses Beispiels ist in Fig. 4 gezeigt. 4. Beachten Sie, dass eine der Farben des Gradienten transparent angegeben ist, sodass sie sich indirekt über die Farbe der Webseite ändert.

Feige. 4. Hintergrund von horizontalen Streifen

Die Gradienten sind bei Webdesignern ziemlich beliebt, aber ihre Zugabe ist von verschiedenen Eigenschaften für jeden Browser kompliziert und zeigen die Farbsatz an. Um es Ihnen leichter zu erleichtern, Gradienten zu erstellen und in den Code einzulegen, empfehle ich Ihnen die Website www.colorzilla.com/gradient-diTitor, mit der Sie sich einfach, Gradienten zu konfigurieren und sofort den gewünschten Code zu konfigurieren. Es gibt fertige Vorschau (Vorschau), Farbkonfiguration (Anpassungen), Endcode (CSS), das dh durch Filter unterstützt. Für diejenigen, die in Photoshop oder einem anderen Grafikeditor gearbeitet haben, scheint die Schaffung von Steigungen ein Gesicht zu sein, der Rest wird nicht schwer zu verstehen sein. Im Allgemeinen empfehle ich in jeder Hinsicht.

Mit CSS-Farbverläufen können Sie einen Hintergrund von zwei oder mehr Farben herstellen, die sich glatt von einem zum anderen bewegen. Sie waren schon lange bei uns und haben eine ziemlich gute Unterstützung für Browser. Die meisten modernen Browser verstehen sie ohne Präfixe, für IE9 und älter ist ein Gradientenfilter, auch für IE9 Sie können SVG verwenden.

Gradienten können überall verwendet werden, wo Bilder verwendet werden: In den Hintergründen, als Bulletins of Lists, können sie in Inhalt oder Randbild angegeben werden.

Lineargradient.

Lineare Gradienten sind ziemlich einfach zu bedienen. Für den elementaren Gradienten reicht es aus, die Anfangs- und Endfarben einzustellen:

Hintergrund: Lineargradient (oranged, Gold);

Farben können mehr als zwei betragen. Sie können auch die Richtung des Gradienten und die Grenzen (Stopppunkte) der Farben steuern.

Die Richtung kann Grad oder Schlüsselwörter eingestellt werden.

Schlüsselwörter: nach oben \u003d 0DEG; nach rechts \u003d 90deg; nach unten \u003d 180DEG - der Standardwert; links \u003d 270DEG.

Stichworte Es kann miteinander kombiniert werden, um einen diagonalen Gradienten zu erhalten, beispielsweise nach oben links.

Nachfolgend können als verschiedene Richtungen in der Dehnung von Lila bis zum Gelb angesehen werden:

Hier ist der erste Quadratcode, zum Beispiel:

Oben links (Hintergrund: linearer Gradient (nach oben links, lila, purpurrot, orangered, gold);)

Es sollte daran erinnert werden, dass nach oben rechts nicht derselbe ist wie 45DEG. Die Farbstofffarben sind senkrecht zu den Gradientenrichtungslinien. Wenn oben rechts oben rechts kommt, kommt die Linie von unten links in die obere rechte Ecke, bei 45DEG - ist unabhängig von der Größe der Figur strikt unter diesem Winkel angeordnet.

Der Unterschied ist auf rechteckigen Figuren deutlich sichtbar:

Sie können auch die Stopppunkte für die Gradientenfarben einstellen, die Werte werden in Einheiten oder Prozentsatz eingestellt und können mehr als 100% und weniger als 0% betragen.

Beispiele für Einstellwerte in%, in EM und Werten, die über die Grenzen des Elements hinausgehen:

Je näher gibt es Punkte, um die benachbarten Farben zu stoppen, der CLEARER ist der Rand zwischen ihnen. So können Sie leicht gestreifte Hintergründe machen:

Dies kann beispielsweise ein Hintergrund unter der Seitensäule erfolgen, der auf die gesamte Höhe des übergeordneten Elements gestreckt ist:

Streifen auf dem Hintergrund der Sagebar - ein anderer Gradient, bestehend aus alternierender vollen Transparenz und weiße Farbe Mit Transparenz von 30%. Gradienten mit transluzenten Farben sind praktisch, da sie auf dem Hintergrund jeder Farbe angewendet werden können.

Der Gradient im Beispiel wird von einem komplexen langen Code eingestellt, da die Streifen nur über den Hintergrund des Sensbers platziert werden sollten. Wenn Sie nicht versuchen, alles mit einem Hintergrund für einen Block zu tun, ist es möglich, die Aufgabe mit einem Pseudo-Element zu lösen.

In Abwesenheit von Einschränkungen kann der Code möglicherweise viel kürzer sein:

Licht (Hintergrund: Peachpuff Linear-Gradient (90deg, RGBA (255, 255, 255, 0) 50%, RGBA (255, 255, 255, .4) 50%) Center Center / 2EM;) .dark (Hintergrund: SteelBlue Lineargradienten (RGBA (0, 0, 0, 0) 50%, RGBA (0, 0, 0, 0, 0, 0, 0, 0, 0,2) 50%) Mittelpunkt / 100% 1EM;)

In der ersten Zeile setzen wir die Hintergrundfarbe des Elements, des Typs und der Richtung (Farbe und Richtung, die nicht weggelassen werden können, in der zweiten - Bestimmen Sie die Farben des Gradienten und der Grenze zwischen ihnen in der dritten - wir geben die Position an und Größe des resultierenden Bildes. Der wichtigste Teil ist die Größe. Standardmäßig wird der Hintergrund wiederholt, sodass das resultierende Muster den Hintergrund des Elements füllt. Sehr einfach und verständlich :)

Der gesamte Eintrag kann in einer Zeile vorgenommen werden, aber zur Lesbarkeit ist es bequemer, in mehreren, insbesondere für komplexe Farbverläufe, zu schreiben.

Es ist auch wichtig zu wissen, dass das transparente Schlüsselwort transparent schwarz bedeutet, und nicht transparentes Weiß, also, wenn Sie ihn in Firefox verwenden, können Sie diese Art von Ärger bekommen:

Um dies zu vermeiden, verwenden Sie vollständig transparente Farben des gewünschten Farbtons, beispielsweise weiß: RGBA (255, 255, 255, 0) oder schwarz RGBA (0, 0, 0, 0). Profi verschiedene Methoden Set-Farben können gelesen werden.

Um RGB-Notation einer bestimmten Farbe zu lernen, können Sie verwenden Cs.coloratum., Werkzeug von Lea Verou.

Neben dem üblichen Lineargradienten können Sie einen wiederholten Lineargradienten erstellen - ein wiederholter Gradient

Beispielcode:

Hintergrund: Wiederholung-linearer Gradient (grün, grün .5em, transparent .5em, transparent 1em);

Leider verhalten sich die Wiederholung von Gradienten beide, und geeignet für Muster, die keine wichtige Genauigkeit sind. Wenn Sie eine Genauigkeit benötigen, verwenden Sie linearer Gradient in Kombination mit Hintergrundgröße und Hintergrundwiederholung.

Gradienten haben die gleiche Begrenzung wie Kastenschatten: Sie können nicht separat Farbe oder Richtungen einstellen. Dies führt zu einer Vervielfältigung des Codes und das akute Bedürfnis, Vorverarbeitungsgeräte im Falle der Erstellung komplexer Farbverläufe zu nutzen.

Eine weitere Einschränkung ist, dass Gradienten nicht animiert sind, was jedoch bis zu einem gewissen Grad möglich ist.

Um schnell Cross-Browser-Gradienten zu erstellen, gibt es ein sehr praktisches Werkzeug: colorzilla.com/gradient-deitor/. Zusätzlich zum Code für moderne Browser bietet es Code für alte IE und SVG für den 9..

In Kombination mit den grundlegenden Funktionen des Hintergrundmanagements geben Gradienten kurze Möglichkeiten Hintergründe von unterschiedlichen Komplexitätsgraden vollständig ohne die Verwendung von Bildern zu erstellen. Gradienten können komplexe und interessante Muster erstellen, dies ist jedoch ein völlig anderes Thema.

• Transfer

Arbeiten Sie mit der Übersetzung über das Projekt SingLediv.com. Es hat gezeigt, dass einige CSS-Tools eine breitere Verwendung haben, als ich denkte. Um diese Anwendung jedoch finden zu können, ist es notwendig, die Eigenschaften der Immobilie eindeutig zu verstehen. Der Lineargradient wurde zu einem hellen Beispiel, das Lynn Fisher Virtuoso in seinen Werken verwendete.

Möchten Sie einen hübschen Farbverlauf auf Ihrer Website machen? Background-Bild: Lineargradient (rot, blau); Bereit! Ja, es ist ein wenig langweilig. Wenn Sie also etwas mehr möchten, empfehle ich Ihnen dies mit den Tipps auf CSS- und MDN-Seite. Sind Sie hier? Dann schauen wir uns einige Momente an, da lineare Farbverläufe tatsächlich funktionieren. Um damit zu beginnen, erinnern wir uns an die Syntax, die in der Funktion eines linearen Gradienten verwendet werden kann:

Lineargradient ([von<угла> | Vor<стороны-или-угла>]?, );
Die Funktion nimmt ein optionales erstes Argument an, das den Winkel des Gradienten bestimmt und die mit einer Messeinheit (Grad, Radius, Grad, Umsatz) oder als Schlüsselwort (Seite oder Winkel) ausgedrückt werden kann.

Danach nimmt die Funktion eine Liste von Farben an.

Feld des Gradienten

Das Gradientenbild hat keine Größen, es ist unendlichlich anders als andere Hintergrundbilder. Die sichtbaren Größen gibt ihm ein Gradientenfeld, d. H. Der Bereich, in dem es angezeigt wird.

Wenn Sie in der Regel ein Hintergrundbild in Form eines linearen Gradienten an das DOM-Element anwenden, ist dieser Bereich der Rahmen der Elementgrenzen (das ist der Bereich, in dem die Hintergrundfarbe angezeigt wird).

Wenn Sie in diesem Fall auch die CSS-Eigenschaft Hintergrundgröße (Hintergrundgröße) verwenden und installieren, sagen Sie es mit 200px * 200px, dann hat das Gradientenfeld diese Größe und wird standardmäßig in der oberen linken Ecke platziert des DOM-Elements, sofern Sie nicht auch die Hintergrundposition nicht installieren.

Daher kann das Lesen der folgenden Abschnitte einfach daran denken, dass das Gradientenfeld nicht immer angeordnet ist, sowie die gleichen Abmessungen wie das DOM-Element, mit dem Sie diesen Gradienten verwenden.

Liniengradient.

Im Gradientenfeld, der Linie, die durch die Mitte gelangt und entlang dessen Farben verteilt ist, genannt die Gradientenlinie. Diese Linie kann während der Klärung des Winkels des Gradienten leichter beschrieben werden, so dass dies in der nächsten Abschnitt detaillierter ist.

Eckverlauf

Es ist offensichtlich, dass der Winkel eines linearen Gradienten verwendet wird, um zu bestimmen, in welcher Richtung der Gradienten geht. Aber lasst uns diesen Aspekt mehr betrachten.

Wenn C ein zentraler Punkt des Gradientenfelds ist, dann ist ein Winkel zwischen der vertikalen Linie, die mit, und der Gradientenleitung, die auch durch C verläuft, und entlang der die Anschlagfarbe des Gradienten verteilt ist.

Dieser Winkel kann auf zwei Arten definiert werden:

Verwenden eines der Schlüsselwörter: nach oben (oben) nach unten, nach links (links), nach rechts, nach oben rechts (rechts), nach oben links (links), nach unten rechts (bis rechts), nach unten Links (links unten);
Oder durch Bestimmen eines Winkels mit einer Anzahl und Maßeinheit, beispielsweise 45DEG (45 Grad), 1Turn (1 Turn);

Wenn der Winkel nicht angegeben ist, ist es standardmäßig nach unten geführt (dh 180 Grad oder 0,5 Umdrehungen):

Auf dieser und auf den folgenden Bildern ist das Gradientenfeld durch ein Rechteck begrenzt, und die Gradientenzeile ist eine Fettgraulinie, die durch das Zentrum durchläuft, und entlang der Farben werden angezeigt.

In dem obigen Beispiel ist der Winkel nicht spezifiziert, so dass der Gradient von weiß bis der rote von oben nach unten bewegt, was dem Schlüsselwort nach unten (unten) entspricht, wie unten gezeigt:

Und wie in den folgenden zwei Bildern gezeigt, entspricht der Oberseite (UP) der Ecke bei Nullgraden:

Noch eins wichtiger MomentEs lohnt sich, mit den Schlüsselwörtern des Winkels in Betracht zu ziehen - das nach oben rechts (rechts oben), beispielsweise (oder ein anderer Schlüsselwortwinkel), hängt von der Größe des Gradientenfelds ab.

Logisch ist, dass, wenn Sie einen Gradienten von rot bis Blau in Richtung des oberen rechten Winkels des Elements machen wollten, ein solches Element in der oberen rechten Ecke blau und die violette Farbe in der Mitte des Gradienten sollte Formular um die Linie, die von oben links in der rechten unteren Ecke passiert. So schaut es in das Bild:

Nach oben rechts (rechts) bedeutet nicht, dass die Gradientenleitung den rechten oberen Winkel durchläuft, und es bedeutet nicht einmal, dass der Winkel des Gradienten 45 Grad beträgt!

Schauen wir uns an, wie sich die Gradientenlinie bewegt, wenn der Winkel mit der folgenden Animation geändert wird:

Bei dieser Animation lehnt der Winkel von 0 bis 360 Grad in Schritten von 10 Grad. Mit einer geringen Auflösung können Sie sogar besser in Betracht ziehen, wie unterschiedliche Farben in Form von "Zeilen" angezeigt werden, die immer senkrecht zur Gradientenlinie sind.

Erinnern wir uns daran, dass wir über die Ecken des Gradienten wissen:

Der Winkel wird zwischen der Gradientenleitung und der Linie gemessen, die aus der Mitte des Gradientenfelds herauskommt und nach oben bewegt.
Daher bedeutet 0 Grad hoch.
Der Standardwert des Winkels, wenn er nicht angegeben ist, ist es nach unten, was 180 Grad ist.
Die Schlüsselwörter des Winkels hängen von der Größe des Gradientenfelds ab.

Länge der Gradientenlinie

Bevor wir sehen können, wie die Farben entlang der Gradientenlinie verteilt sind, müssen wir einen Punkt erklären. Möglicherweise haben Sie in der vorherigen Animation bemerkt, dass Farben manchmal außerhalb des Gradientenfelds angeordnet sind, das auf den ersten Blick ein bisschen seltsam aussehen kann, aber es ist logisch, wenn Sie den Grund kennen.

Schau dir das Beispiel an:

Wir brauchen einen Gradient von rot bis blau mit einem Winkel von 45 Grad, und im Hinblick auf das Seitenverhältnis des Gradientenfelds kann die Gradientenleitung nicht den rechten oberen Winkel durchlaufen.

Der Browser will jedoch (das heißt, die Spezifikationen zwingen es) Machen Sie die rechte obere Ecke rein blau. Wenn wir getan wären, dass die Gradientenlinie an den Rändern des Feldes begann, würde die blaue Farbe den größten Teil des Feldes dauern, und der Gradient wäre nicht gebrochen.

Dazu kann die Gradientenlinie daher manchmal über das Gradientenfeld hinausgehen. Gleichzeitig ist es ziemlich leicht, herauszufinden, wo es beginnt, und wo es endet. Zeichnen Sie einfach eine Linie, die durch den nächstgelegenen Winkel durchläuft, und das senkrecht zur Gradientenlinie ist. Der Punkt, an dem diese Linie die Gradientenlinie überquert, und ist die Start- / Endstelle.

Wenn Sie die Breite des Gradienten W, der Höhe H und den Winkel des Gradienten angeben, ist die Länge der Gradientenlinie:

ABS (W * SIN (A)) + ABS (H * cos (a))

Farben

Farben sind eine Liste geteilt durch Kommas, in denen jedes Element wie folgt definiert werden kann:
<цвет> [<процентное соотношение> | <длина>]?

Daher ist es nicht notwendig, anzugeben, wo die Farben auf der Gradientenlinie platziert werden sollen. Beispielsweise:

Keiner der Farben hat seine eigene Position, so dass der Browser selbst ihre Position bestimmt hat.

In der Höhe einfaches Beispiel Nur mit 2 Farben wird die Farbe 1 um 0% (zu Beginn der Gradientenleitung) angeordnet, und Farbe 2 beträgt 100% (am Ende der Gradientenleitung).

Wenn Sie dann eine dritte Farbe hinzufügen, bleiben Sie farbe 1 immer noch 0%, die Farbe 2 beträgt 50%, und die Farbe beträgt 100% 100% und so weiter.

In dem obigen Beispiel wurden 5hundert Farben angegeben, und der Browser berechnete ihre relative Position als 0%, 25%, 50%, 75%, 100%. Der Grund dafür ist eine einheitliche Verteilung entlang des Gradientenbereichs.

Die Position der Farbe kann entweder mit dem prozentualen Verhältnis (in Bezug auf die Größe der Gradientenleitung) oder in Form von CSS-Länge ausgedrückt werden (wobei eine Einheit gültig ist cSS-Messungen.).

Hier ist ein Beispiel:

Wie Sie sehen, hat jede der 5 noch Farben ihre eigene Position in Pixel angegeben. Diese Bestimmungen werden vom Beginn der Gradientenlinie berechnet.

Mit solchen Positionen können Sie interessante Effekte erhalten. Sie können zum Beispiel einen Gradienten verwenden, um keinen Gradienten als solche zu zeichnen, sondern mehrere Farben hinterlassen:

Im Bild über 7 Farben, und sie sind so installiert, dass die nächste Farbe in genau derselben Position wie der letztere beginnt, was bedeutet, dass der Browser nicht den Raum zwischen den beiden Stoppblumengradienten füllen muss.

Es ist natürlich alles süß und lustig, aber was passiert, wenn Sie positionierte Farben mit irreduziblen Mischen mischen? Dann werden Sie den Browser zwingen, mehr zu arbeiten, und bitten Sie es, die Farben automatisch zu verteilen, für die Sie die Position nicht angeben:

In diesem einfachen Beispiel hat die zweite Farbe (orange) keine Position, daher bestimmt der Browser selbst und findet einen geeigneten Ort zwischen der zuvor definierten und der nächsten Farbe. Hier ist es sehr einfach, da die unmittelbaren Nachbarn der zweiten Farbe ihre Position haben, aber wenn sich nur in einigen Farben Positionen befinden oder wenn die vorherigen oder folgenden Farben keine Position haben, ist alles kompliziert.

Schauen wir uns ein paar Beispiele an:

Im obigen Beispiel ist nur die dritte Farbe (gelb) um 30% positioniert. Um den ganzen Rest besser zu verteilen, wird der erste um 0% gesetzt, wobei letztere 100% beträgt, und die verbleibenden Farben sind in den Spalt verteilt (so dass die Orangen direkt zwischen 0% und 30% und rot endet - zwischen 30% und 100%).

Dies ist das Beispiel oberhalb der ersten und letzten Farbe, so dass der Rest zwischen diesen beiden gleichmäßig verteilt ist.

Natürlich wäre es zu einfach, wenn 0% und 100% ein starrer Rahmen waren, für den Sie nicht beenden können. Wie aus dem vorherigen Beispiel ersichtlich ist, befindet sich die letzte Farbe 120%, und daher sollten alle anderen Farben in Bezug auf diese Position entsprechend verteilt werden (der Anfangspunkt des Standards in diesem Fall bleibt 0%).

Und wenn Sie Ihren Browser noch mehr arbeiten möchten, geben Sie nicht die Reihenfolge der Positionen an?

In der Tat muss die Farbe bestellen, aber nichts verbietet Ihnen, dies nicht zu tun, und nichts schreckliches wird passieren, wenn Sie dies nicht tun. Ihr Browser fixiert es einfach, wie unten gezeigt:

Beginnen wir mit der ersten Farbe (rot), 30%. Als nächstes ist die zweite Farbe 10% angeordnet, was bereits falsch ist, da es oben genannt, die Farben sollten bereits in der Position angezeigt werden. Daher korrigiert der Browser hier die Position der zweiten Farbe und setzt sie in derselben Position wie die vorherige Farbe (30%). Als nächstes kommt die dritte Farbe (gelb), die 60% gelegen, was richtig ist, aber er folgt dem vierten (blau) um 40%. Wieder wird die Position eingestellt und auf denselben Wert wie die vorherige positionierte Farbe eingestellt.

Letztendlich ist, wie in dem obigen Beispiel gezeigt, die letzte Farbe (blau) falsch positioniert und der Browser ist seine Position wie die vorherige Farbe, die in diesem Fall weder sein unmittelbarer Nachbar (Gelb) noch eine Nachbarfarbe ist, was es vor ihm ist (orange), also muss er in die erste Farbe zurückkehren (rot). Somit werden alle Farben zwischen Rot und Blau auf 30% eingestellt und daher unsichtbar.

Instrumente

Alle Screenshots in diesem Artikel werden aus dem einfachen Tool entnommen, das ich auf Codepen getan habe, und mit dem Sie die Funktion eines linearen Gradienten eingeben können, und das Gradientenfeld, die Gradientenlinie, einen Winkel, sowie Informationen über die Farben über die Farben das Element.

Im Instrument gibt es alle Arten von Bugs und Beschränkungen (siehe Kommentare zu JavaScript), also erwarten Sie nicht viel davon.

Stichworte:

• CSS.
• lineargradient.

Tags hinzufügen

eIN! Der Gradient ist ein hervorragendes Instrument zur Manipulationsfarbe in CSS3.. Anstatt das Bild zu verwenden, um einen Gradienteneffekt auf einer Webseite zu erstellen, die davon profitieren wird CSS3-Gradient. Und dabei "erleichtern" den Standort. Da der Benutzer nicht Zeit und Verkehr auf dem Download des Hintergrundbildes verbringen muss. Es gibt zwei Haupttypen von Gradienten: radial und linear. Der heutige Beitrag wird um sie sein.

Linearer Farbverlauf

Wie sie in der Klassifizierung sagen, gradienten in CSS3. sind Bilder. Es gibt keine besonderen Eigenschaften für sie. Verwenden Sie für Anzeigen die Eigenschaft des Hintergrundbildes.

Im allgemeinen Fall sieht die Syntax des Gradienten (linear) so aus:

1 2 3 4 5 6 7

div ( hintergrund-Bild: -Webkit-linearer Gradient (oben, # ff5a00 0%, # ffae00 100%); hintergrund-Bild: -Moz-linearer Gradient (oben, # ff5a00 0%, # ffae00 100%); hintergrund-Bild: -MM-Linear-Gradient (oben, # ff5a00 0%, # ffae00 100%); hintergrund-Bild: -O-Linear-Gradient (oben, # ff5a00 0%, # ffae00 100%); }

Also, lass uns alles in Ordnung gehen.

Zunächst wird ein linearer Gradienten zur Linear-Gradienten-Funktion deklariert. Die Funktion hat drei Hauptwerte. Der erste Wert bestimmt die Ausgangsposition. In dem angegebenen Beispiel zeigt top t.e. Quellenposition von oben. Sie können auch unten, links und rechts benutzen.

Wenn der Winkel negativ ist, wird die Position von der unteren linken Ecke nach oben links geändert.

Der zweite Wert der Funktion ist die Anfangsfarbe und die Stoppposition, die in Prozent angegeben ist. Die Ankündigung dieser Position ist nicht erforderlich, der Standardbrowser wird der erste Farbwert von 0% angemessen.

Der letzte Wert ist die zweite Farbe und die Stoppposition. Standardmäßig dauert ein Wert von 100%. Diese extremen Werte und sie implizieren, dass die erste Farbe sofort in den zweiten Schritt bewegt wird. Wenn wir jedoch für die erste Farbe von 50% installieren, beginnt sich nur aus der Mitte der zugänglichen Höhe in die zweite. So sieht der Code aus, als würde der Code aussehen:

Wir bekommen den gleichen Streifen in der Höhe. Mit einer klaren Grenze wird der Farbübergang nicht. Um besser zu verstehen, wie es funktioniert, experimentieren Sie mit den Werten.

Radialgradient sowie linear ist deklariert, nur bereits radialer Gradient (). Es gibt auch Hauptwerte: Dies ist eine Form eines Radialgradienten (Kreis - ein Kreis oder Ellipse - Ellipse), anfängliche und endgültige Farbe. Die Syntax lautet wie folgt:

div ( hintergrund: Radialgradient (Kreis, # F9E497, # FFAE00); }

Wenn Sie das Formular nicht angeben, wird die Ellipse standardmäßig installiert.

Die Standardeinstellung ist auch die zentrale Position des Gradienten, es kann geändert werden. Position, die Sie mit den Befehlen (oben, unten, links, rechts und dem Zentrum) sowie deren Kombinationen setzen oder in Prozent oder Pixel angeben.

Kombinationen von Teams:

• Übertrieben an der Spitze - Top - 50% 0%;
• In der oberen linken Ecke - links oben - 0% 0%;
• In der oberen rechten Ecke - rechts - 100% 0%;
• Zentrum - Mitte - 50% 50%;
• Links in der Mitte - Linke Mitte - 0% 50%;
• Rechts in der Mitte - rechts - 100% 50%;
• In der Mitte unterhalb von unten - 50% 100%;
• In der unteren linken Ecke - links unten - 0% 100%;
• In der rechten unteren Ecke - rechts unten - 100% 100%.

Hier ist ein Beispiel mit Prozentsätzen:

div ( background-Bild: Radialgradient (70% 20%, Kreis, # F9E497, # FFAE00); }

Der erste Wert entlang der Achse H. zweite W..

Der radiale Gradienten kann auch die Größe einstellen. Die Größe ist durch den Spalt nach der Form des Gradienten angegeben. Standard angewendet weit entfernte Ecke (zur Ferne Ecke). Die Berechnung erfolgt vom zentralen Punkt des Gradienten an:

Betrachten Sie es, es besser als das Beispiel zu berücksichtigen. Elliptischer Gradient mit weißem Anfänglich und ultimativem Blau:

div ( hintergrund-Bild: Radialgradient (230px 50px, Ellipse am nächsten, weiß, blau); }

Die Größe wird aus dem Abstand zu den nächsten Seiten berechnet, es ist offensichtlich, dass die Oberseite entlang der Achse näher ist Y. und linke Achse X..

Und jetzt auf die entfernten Seiten:

div ( background-Image: Radialgradient (230px 50px, Ellipse weit entfernt, weiß, blau); }

Das Ergebnis, wie sie im Gesicht sagen. Die Größe wird aus dem Abstand zu den entfernten Seiten berechnet.

In radialem, wie in einem linearen Farbverlauf für Farbhalterung, kann die Stoppposition angewendet werden. Ich möchte auch bemerken, ob Sie die Transparenz der Farben erreichen müssen, und verwenden Sie RGBA.

div ( hintergrund-Bild: Lineargradient (oben, RGBA (255, 90, 0, 0,2), RGBA (255, 174, 0, 0,2); }

Alpha-Kanal, das, das das letzte und gleich 0,2 ist, zeigt, dass nur 20% von 100% verwendet werden.

In beiden Arten CSS3-Gradient. Sie können nicht zwei, sondern mehrere Farben verwenden.

div ( background-Bild: Linearer Gradient (oben, rot, orange, gelb, grün, blau, indigo, violett); }

Für beide Arten können Sie die Wiederholung von Farben verwenden. Das heißt, ein Zyklus wird aus diesen Werten gebildet. Funktionen eines wiederkehrenden Gradienten, Wiederholen-linearer Gradient () - für lineare und wiederholende Radialgradient () - für radial.

div ( hintergrund-Bild: Wiederholungs-Radialgradient (rot, blau 20px, rot 40px); }

0%, # FFAE00 100%); / * für Firefox * /
hintergrund-Bild: -MM-Linear-Gradient (oben, # ff5a00 0%, # ffae00 100%); / * für dh 10+ * /
hintergrund-Bild: -O-Linear-Gradient (oben, # ff5a00 0%, # ffae00 100%); / * Für Opera * /
hintergrund-Bild: Lineargradient (oben, # ff5a00 0%, # ffae00 100%); / * Standardsyntax * /
}

div (
filter: Progid: dximagetransform.microsoft .gradient (Startcolorstr \u003d # 33FFF5A00, Endcolorstr \u003d # 33FFAE00);
}

Wo 33 unmittelbar nach dem Gitter ist, ist dies der Prozentsatz der Farbsättigung.

Ich hoffe, dass sich der Artikel als nützlich für Sie erwies, und das als angesehene Thema ist vollständig offenbart.

Um mit frischen Artikeln und Lektionen auf dem Laufenden zu bleiben, abonnieren Sie