So verwenden CSS3 Gradients
Ein CSS3 Gradient (die eine Mischung zwischen zwei oder mehr Farben ist) kann ein schöner Hintergrund sein. Früher hätte Entwickler einen Gradienten erstellen, indem Sie einen dünnen Streifen Gradienten in einem Bildbearbeitungsprogramm erstellen, und dann die repeat-x mit oder repeat-y-Regeln zu machen, dass kleinere Bild über die Seite zu replizieren. Das war eine schöne Technik, aber es war nicht sehr flexibel, und nur relativ einfache lineare Verläufe möglich waren.
Menu
CSS3 hat eine bemerkenswerte Gradienten Regel hinzugefügt, die Steigungen nativ durch CSS macht. Wenn diese Technik voll angenommen wird, macht es viel einfacher Steigungen mit zu arbeiten.
CSS3 unterstützt zwei Haupttypen von Steigungen: lineare und radiale. Ein linearer Gradient ändert Farben entlang einer geraden Linie, und eine radiale Gradienten strahlt nach außen von einem zentralen Punkt.
Der Gradient Mechanismus hat eine der langsameren Teile von CSS standardisiert und verabschiedet werden, so dass es immer noch ändert sich, aber es sieht aus wie die Browser schließlich auf einer Standard-Einstellung. Leider sind die herstellerspezifische Präfixe, die für den Augenblick.
Wie man ein einfaches Gradienten zu bauen
Die einfachste Gradient wird in Feld demonstriert 1. Es variiert von links nach rechts, in rot und endend mit Weiß.
# Box1 {background-image: linear-Gradienten (links, rot, weiß) -background-Bild: -moz-linearen Gradienten (links, rot, weiß) -background-Bild: -webkit-linear-Gradienten (links, rot , Weiß)-}Hier ist, wie Sie einen einfachen linearen Gradienten aufbauen:
Definieren Sie den Wähler.
Ein Gradient wird in CSS definiert, und Sie werden alle Ihre Standard-CSS-Selektoren verwenden müssen, um festzustellen, welches Element Sie den Gradienten zu hinzufügen.
Verwenden Sie die Hintergrund-Bildregel.
Ein Gradient ist eine besondere Form des Bildes. Sie können den Hintergrund-Bildregel verwenden, um einen Gradienten in den Hintergrund eines Elements zu gelten, einschließlich des gesamten Körpers auf der Seite.
Rufen Sie die linearen Gradienten Funktion.
Einige CSS-Elemente erfordern Klammern, weil sie technisch-Funktionen sind. Der Unterschied spielt keine Rolle, gerade jetzt, aber Sie müssen die Klammern zu übernehmen, wenn Sie diese Art von Wert verwenden. Das linearen Gradienten Technik ist eine Funktion.
Bestimmen Sie die Richtung der Gradient fließen.
Sie können einen Gradientenfluss in eine beliebige Richtung innerhalb des Elements wollen machen. Zeigen links bewirkt, dass das Element von links nach rechts zu fließen. Sie können von oben nach unten zu fließen, zu verwenden, oder oben links von oben zu gehen links nach unten rechts. Verwenden Sie eine beliebige Kombination aus oben, links, unten und Recht. Sie können auch einen Winkel in Grad angegeben, wie im nächsten Beispiel gezeigt.
Geben Sie eine Ausgangsfarbe.
Verwenden Sie eine der Standard-Farbwerkzeuge (Farbnamen, hex Farben, rgb () / RGBA (), oder hsl ()) Die Anfangsfarbe zu bestimmen.
Geben Sie eine Endfarbe.
Die letzte Farbe angezeigt wird die Endfarbe des Gradienten sein. Der Gradient fließt von Anfang an Farbe gleichmäßig zu beenden.
Wiederholen Sie mit Browser-Erweiterungen.
Sie müssen Varianten für die bestimmte Browser hinzuzufügen. Sie werden eine neue Version von der vornehmen müssen Hintergrundbild Regel für jeden der großen Anbieter.
Wie ein interessanter Steigung zu machen
Wie Sie im Kasten sehen 2, erhalten Sie einen komplexeren Gradienten zeigt mehrere Farben und eine interessante Winkel zu sehen.
# Box2 {background-image: linear-Gradienten (75deg, rot, weiß 33%, 66% weiß, blau) -background-Bild: -moz-linear-Gradienten (75deg, rot, weiß 33%, 66% weiß, blau ) -background-Bild: -webkit-linear-Gradienten (75deg, rot, weiß 33%, 66% weiß, blau) -}Hier ist, wie Sie mehr pizazz Verläufen hinzufügen.
Verwenden Sie einen Winkel für die Richtung.
Anstatt Ihre Gradientenrichtung mit dem Standard-Angabe oben/links Schlüsselwörter können Sie einen Startwinkel angeben. Winkel werden mathematisch in Grad gemessen, wobei 0 die von rechts kommen und 90 kommen von oben nach unten. Sie müssen den Grad Messung angeben mit deg, so 75 Grad wird geschrieben als 75deg.
Fügen Sie so viele Farben wie Sie möchten.
Ein Gradient kann eine beliebige Anzahl von Farben in ihm. Jede Änderung in Farben nennt man ein Farbanschlag. Das Beispiel zeigt drei verschiedenen Farben.
Bestimmen Sie, wo die Farbe Anschläge passieren.
Standardmäßig sind die Farben gleichmäßig entlang des Gradienten verteilt. Wenn Sie möchten, können Sie eine beliebige Farbe bewegen überall auf dem Gradienten erscheinen Sie wollen. Die Farbstoppstellen werden durch Prozentangaben. Es ist nicht notwendig, eine Position für die erste und letzte Farbstopp hinzuzufügen, wie sie sind, vermutet 0% und 100% betragen.
Erstellen eines Farbstreifen durch zwei Anschläge der gleichen Farbe bereitstellt.
Box 2 verfügt über ein Band von Weiß. Um diesen Effekt zu erhalten, zwei Farbanschläge wurden mit weißen produziert, ein zu 33% erscheint, und die andere bei 66%. Dadurch wird die Steigung etwa in Drittel.
Legen Sie zwei Farben an der gleichen Stelle für eine abrupte Farbwechsel.
Wenn Sie eine plötzliche Farbwechsel wollen, setzen Sie einfach zwei verschiedene Farben auf den gleichen Prozentsatz.
Wiederholen Sie dies für alle Browser.
Auch hier müssen Sie die verschiedenen Browsern zu betrachten, bis diese Technik standardisiert wird.
Wie eine radiale Gradienten zu bauen
CSS3 unterstützt einen zweiten Gradienten-Typ bezeichnet die radiale Gradienten. Die Grundidee ist die gleiche, mit der Ausnahme, anstatt nach einer geraden Linie, wie einem linearen Gradienten, einen radialen Gradienten wird von einer zentralen Stelle in dem Element fließt und nach außen abzustrahlen.
Die grundlegende radiale Gradienten in Feld 3 ist mit diesem CSS-Code erstellt:
# Box3 {background-image: Radial-Gradienten (weiß, blau) -background-Bild: -moz-Radial-Gradienten (weiß, blau) -background-Bild: -webkit-Radial-Gradienten (weiß, blau) -}Wie Sie sehen können, ist die grundlegende radiale Gradienten ähnlich wie bei einem linearen Gradienten erstellt, außer es die verwendet Radial-Gradienten Funktion statt der linearen Gradienten Funktion.
Radial Steigungen haben viele Möglichkeiten, die sie sehr vielversprechend macht, aber der Browser-Unterstützung für diese verschiedenen Standards ist sehr fleckig. Box 4 hat einen radialen Verlauf mit drei Farben:
# Box4 {background-image: Radial-Gradienten (rot, weiß, blau) -background-Bild: -moz-Radial-Gradienten (rot, weiß, blau) -background-Bild: -webkit-Radial-Gradienten (rot, weiß , blau) -}Es ist auch möglich, die Form des Gradienten von Kreis zu ändern, um eine Ellipse, in der Mitte des Gradienten zu einem anderen Punkt innerhalb des Elements zu ändern, und Farbstopps zu spezifizieren. Sie müssen die aktuellen Spezifikationen zu überprüfen, um zu sehen, wie diese Dinge getan werden, da sie noch recht experimentell sind.