Schauen Sie sich den CSS3-Gradient an (lineare und radiale Gradienten). Linearer Farbverlauf
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 | div ( |
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 ( |
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 - Zentrum - 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 ( |
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 fächtelste 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 ( |
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 ( |
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 ( |
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 ( |
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 ( |
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
Zuletzt aktualisiert: 14.04.2016
Gradienten stellen einen reibungslosen Übergang von einer Farbe zum anderen dar. CSS3 verfügt über eine Reihe integrierter Gradienten, mit denen ein Elementhintergrund erstellt werden kann.
Gradienten in CSS repräsentieren keine besonderen Eigenschaften. Sie erstellen nur einen Wert, der der Hintergrundbilder-Eigenschaft zugeordnet ist.
Ein linearer Gradient breitet sich in einer geraden Linie von einem Ende des Elements zur anderen aus, wobei ein reibungsloser Übergang von einer Farbe zur anderen ausübt.
Um einen Gradienten zu erstellen, müssen Sie den Anfang und mehrere Farben angeben, zum Beispiel:
Hintergrund-Bild: Lineargradient (links, schwarz, weiß);
In diesem Fall ist der Beginn des Gradienten der linke Rand des Elements, der mit dem linken Wert bezeichnet wird. Gradientenfarben: Schwarz (Schwarz) und Weiß (weiß). Das heißt, ab dem linken Rand des Elements nach rechts, wird es reibungslos von Schwarz in Weiß gehen.
Bei der Verwendung von Gradienten gibt es einen Nachteil - die Vielfalt der Browser wird gezwungen, das Anbieterpräfix zu verwenden:
Webkit- / * für Google Chrome., Safari, Microsoft Edge., Oper über 15 Version * / -Moz- / * für Mozilla Firefox * / -O- / * für Opera ältere Version (Opera 12) * /
Die volle Verwendung des Gradienten wird also so aussehen:
Linearer schwarzer und weißer Gradient
Um den Beginn des Gradienten zu installieren, können Sie die folgenden Werte verwenden: links (links nach rechts), rechts (rechts links), oben (oben nach unten) oder unten (Bottom-up). Zum Beispiel wird ein vertikaler Gradient so aussehen:
Hintergrundbild: Lineargradient (unten, schwarz, weiß);
Sie können auch eine diagonale Richtung mit zwei Werten angeben:
Hintergrund-Bild: Lineargradient (oben links, schwarz, weiß);
Neben den spezifischen Werten des Typs TOP ODER LINKS können Sie auch einen Winkel von 0 bis 360 angeben, der die Richtung des Gradienten bestimmt:
Hintergrund-Bild: Lineargradient (30DEG, schwarz, weiß);
Nach der Ecke ist das Wort DEG angegeben.
Zum Beispiel bedeutet 0DEG, dass der Gradienten auf der linken Seite beginnt und zu sich bewegt rechter TeilWenn Sie 45DEG angeben, beginnt es in der unteren linken Ecke und bewegt sich in einem Winkel von 45 ° in die obere rechte Ecke.
Nachdem Sie den Anfang des Gradienten ermittelt haben, können Sie die angewandten Farben oder Squirt-Punkte angeben. Die Farben müssen nicht zwei sein, es kann mehr davon geben:
Background-Bild: Lineargradient (oben, rot, #ccc, blau);
Alle verwendeten Farben sind gleichmäßig verteilt. Sie können jedoch auch spezifische Hintergrundplätze für Farbpunkte angeben. Dazu wird der zweite Wert nach der Farbe hinzugefügt, wodurch die Position des Punkts bestimmt wird.
Hintergrund-Bild: Lineargradient (links, #ccc, rot 20%, rot 80%, #ccc);
Farbverlauf wiederholen
Mit dem Wiederholungs-Linear-Gradienten können Sie wiederholte lineare Gradienten erstellen. Beispielsweise:
Hintergrund-Bild: Wiederholen-Linear-Gradient (links, #ccc 20px, rot 30px, RGBA (0, 0, 126 ,.5) 40px); Background-Bild: -Moz-wiederholender Lineargradient (links, #ccc 20px, rot 30px, RGBA (0, 0, 126, .5) 40px); Background-Bild: -Webkit-Wiederholung-linearer Gradient (links, #ccc 20px, rot 30px, RGBA (0, 0, 126 ,.5) 40px);
In diesem Fall beginnt der Gradienten mit dem linken Rand des Elements aus dem Graustreifen (#ccc) 20 Pixel-Breite, dann gehen bis zu 30 Pixel auf die rote Farbe, und dann bis zu 40 Pixel, der Rückgang zu hellblau Farbe (RGBA (0, 0, 0, 126, .5)). Danach wiederholt der Browser den Gradienten, bis die gesamte Oberfläche des Elements füllt.
Farbgradient ist ein reibungsloser Übergang von einem angegebene Farbe zu einem anderen durch Zwischenfarben. In einem linearen Gradienten tritt der Übergang in einer geraden Linie aus dem Punkt auf EIN. Darauf hinweisen B.. Der Gradient kann mehr als zwei Bezugspunkte haben - dann wird der Übergang aus dem Punkt hergestellt EIN. Darauf hinweisen B.Dann von Punkt B. Darauf hinweisen C. usw.
So erstellen Sie einen hintergrund linearen Farbverlauf in CSS
In CSS3 können Sie den Artikel durch die bereits bekannte Hintergrundbilder-Eigenschaft einen Gradientenhintergrund hinzufügen. Der Wert von Lineargradienten () wird als Wert verwendet, wobei in Klammern den Startpunkt des Gradienten, der Anfangsfarbe und der endgültigen Farbe angeben muss.
Machen wir zum Beispiel einen linearen Hintergrund mit einem Übergang von violetter Farbe bis rot. Gleichzeitig wollen wir, dass der Anfangspunkt mit violetter Farbe auf der rechten Seite ist, und der Gradientenvektor wurde nach links geschickt. Wir schreiben den Code:
Hintergrund-Bild: Lineargradient (nach links, violett, rot); Hintergrundgradient auf Block
Die Farben der Gradientenpunkte können in einem beliebigen Format aufgenommen werden, das für CSS zugänglich ist, egal ob Hexadezimalcode, RGB-Format oder andere. Die Richtung des Gradienten wird mit dem Zehen auf und anschließend eingestellt schlüsselwörter Links, rechts, oben und unten, was kombiniert werden kann, um die Neigung zu ändern. Beispielsweise:
Background-Bild: Lineargradient (nach rechts unten, # EE82EE, # FF0000); 
Darüber hinaus können Sie den Neigungswinkel direkt angeben, mit einer positiven oder negativen Zahl mit dem DEG-Präfix (ohne Leerzeichen). Für einen bestimmten Winkel von 0º oder 360º geht die Gradientenzeile nach oben. Mit zunehmendem Neigungswinkel erfolgt die Vektorbewegung im Uhrzeigersinn (bei Verwendung eines negativen Werts ändert sich die Bewegung auf das Gegenteil). Code-Aufnahme-Beispiel:
Background-Bild: Lineargradient (-110DEG, # EE82EE, # FF0000); 
Mehrere Referenzpunkte
Wie gesagt, ein Gradient kann mehr als zwei Bezugspunkte haben. Gleichzeitig bewegt sich der Hintergrund von der ersten Farbe nicht von der ersten Farbe bis zum zweiten, vom zweiten bis zum dritten, vom dritten bis zum vierten und so weiter, bis er den endgültigen Bezugspunkt erreicht. Wenn Sie die Anzahl dieser Punkte in der Gradienten erhöhen möchten, fügen Sie sie einfach durch das Komma hinzu. Beispielsweise:
Background-Bild: Lineargradient (145DEG, # EE82EE, SlateBlue, # FFD86A, Lila); 
In unserem Beispiel sind vier Referenzfarbpunkte angegeben, aber sie können so weit wie möglich und in beliebigen gerichteten Farbformaten hinzugefügt werden.
Länge Übergänge
Standardmäßig stellt der Browser Punkte gleich ab, daher ist die Abstufung einheitlich. Diese Entfernung kann jedoch mit Einheiten gesteuert werden cSS-Messungen.. Lassen Sie uns das folgende Beispiel analysieren:
Hintergrund-Bild: Lineargradient (# 92009B 20%, # F5E944 90%, # 00ffa2); 
In unserem Code nach der Farbe # 92009B ist 20% angegeben. Da es in der Nähe des ersten Bezugspunkts steht, bedeutet dies, dass 20% der Länge des Elements in der angegebenen Farbe lackiert werden. Danach beginnt der Gradienten: Der Wert von 90% spricht den Browser, der benötigt wird, um die Farbe # F5E944 bis 90% der Länge des Elements (ab 20%) zu erreichen. Danach beginnt der verbleibende Raum den Übergang zur dritten Farbe - # 00ffa2.
Dieses Thema erfordert auch die Praxis. Erstellen Sie einen Steigungshintergrund mit mehreren Stützpunkten (mehr als zwei), spielen Sie mit Entfernungen und beobachten Sie die Verlaufsänderungen im Browser.
Vendan-Präfixe.
Um einen Cross-Browser auf einige späte CSS-Eigenschaften bereitzustellen, müssen Sie Anbieterpräfixe hinzufügen - spezielle Konsolen, die Browser-Entwickler hinzufügen:
- -Webkit- - Präfix für Chrome, Safari, Android;
- -Moz- - Präfix für Firefox;
- -O- - Präfix für Oper.
Der Gradientenhintergrund erfordert auch die Verwendung von Präfixdaten, wenn dies erforderlich ist, um die maximale Anzahl von Browsern zu unterstützen. Anpassen Sie dazu den Code wie folgt:
Background-Bild: -webkit-linearer Gradient (links, violett, rot); Hintergrund-Bild: -Moz-linearer Gradient (links, violett, rot); Hintergrund-Bild: -O-linearer Gradient (links, violett, rot); Hintergrund-Bild: Lineargradient (nach links, violett, rot);
So fügen Sie ein Präfix hinzu, das Sie eine separate Ankündigung erstellen möchten. Darüber hinaus können Sie, wie Sie vielleicht feststellen, Eigenschaften mit Anbieterpräfixen nicht Erfordern die Verwendung des Präfix, das verwendet werden soll, wenn Sie die Richtung des Gradienten angeben.
Internet Explorer-Unterstützung.
Leider funktioniert der Gradientenhintergrund nur in IE10 +. Vorherige Versionen Verstehe es nicht und werde es ignorieren. Um zumindest den üblichen Hintergrund in alten Browsern sicherzustellen, können Sie t erstellen. N. "CAP": Wählen Sie den entsprechenden Farbton aus und schreiben Sie die Hintergrundfarbeigenschaft auf. Über Eigentum mit einem Gradienten. Auf diese Weise, alter Browser Wenden Sie die Hintergrundfarbe "Backup" an, und die unbekannten Eigenschaften werden es vermissen, während in einem moderneren Browser der Gradientenhintergrund auf einen festen Hintergrund fällt und sie blockiert.
Wenn Sie einen durchscheinenden Gradienten haben (zum Beispiel mit dem RGBA-Farbformat) und Sie möchten einen Backup-Stub-Hintergrund nicht zerstreuen, setzen Sie den Gradienten durch die abgekürzte Hintergrundeigenschaft anstelle des Hintergrundbildes. Dann wird der Hintergrundfarbwert auf transparent überschrieben.
Weitere im Lehrbuch: Wiederholungs-Lineargradient () ist ein wiederholender linearer Gradient.
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.) - Glatter Ü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));););););)
