Erstellen Sie Verläufe mit CSS 3
Gradients sind ein beliebter Effekt der Grafikdesigner überall da Gradienten um einen reibungslosen Übergang von Farbe. Hinzufügen Gradienten zu dem Hintergrund einer Web-Seite oder auf Abschnitte innerhalb einer Seite fügt Reichtum und die Tiefe zu einem Design.
In der Abbildung können Sie den Unterschied zwischen einem radialen und einem linearen Gradienten zu sehen.
In früheren Versionen von CSS, wenn Sie einen Farbverlauf im Hintergrund eines Elements, wie ein Tag verwenden wollte, musste man ein Bild zu verwenden. Wenn Sie klug waren, haben Sie eine 1-Pixel breite Grafik, die so groß war, wie Sie die Steigung und dann eingezogen, um sie als Hintergrund wollte, so dass es den Raum zu füllen wiederholt. Wenn Sie ein Hintergrundbild gut gestaltet, könnte die Größe der Bilddatei klein sein, aber die Einschränkungen viele.
Zum Beispiel hatte man die Steigung so groß oder größer als der Raum, den Sie ausfüllen wollte zu machen, die Ihre Fähigkeit, flexible Seite Designs zu erstellen beschränkt. Ähnlich ist ein zweites Hintergrundbild hinter dem Gradienten übereinstimmt, wenn ein Muster dieser Art von Bild hatte, war keine einfache Aufgabe. Kurz gesagt, das Hinzufügen Gradienten Seitendesigns möglich war, aber auch ein echter Ärger.
Geben Sie CSS 3 und Designer können überall feiern die neuen Verlaufsoptionen auf einmal die alten Probleme zu lösen. erzeugt Gradients mit CSS 3 Download schneller und passen sich automatisch perfekt den Raum zu füllen.
CSS 3 Gradienten können als linear gestaltet sein, oder radial, und Sie können verschiedene Farbbänder in unterschiedlichen Abständen entlang des Kontinuums gelten. Alles in allem CSS 3 Gradienten können in den meisten Fällen verwendet werden, wo ein Designer eine zu verwenden sind und eine deutliche Verbesserung CSS wünschen würde.
Wenn Sie einen Verlauf auf einem Hintergrund hinzufügen - ob innerhalb einer Seite der Hintergrund der gesamten Seite oder ein Element ist, wie ein Tag - der Gradient passt sich automatisch den gesamten Raum zu füllen, wenn Sie eine Größe angeben. Gradients kann auch in der Grenze von Elementen verwendet werden, und das Zentrum einer Kugel in einer ungeordneten Liste zu füllen.
Hier ist die einfachste Syntax eines linearen Gradienten in CSS 3 für WebKit-Browser für die Erstellung von:
-Webkit-Gradienten (linear,, , von( ), nach( )) -
Radial-Gradienten werden auf diese Weise erstellt:
-Webkit-Gradienten (radial,, , , [, ] *) -
Hier sind zwei Beispiele von Gradienten als Hintergrundbild verwendet:
Der folgende Code erstellt einen linearen Gradienten mit zwei Farben:
background-image: -webkit-Gradienten (linear, links unten, links oben, Farbanschlag (0,32, #FFFFFF), Color-Stop (0,66, # 245FAB)) -
Dieses Codebeispiel erzeugt einen radialen Verlauf mit mehreren Farben:
Hintergrund: -webkit-Radial-Gradienten (radial, mitte, 0, mitte, 70,5, von (grün), bis (gelb)) -
Hier ist der Code verwendet, um die Steigung in den Hintergrundbereichen des Körpers, Überschriften zu erstellen, und asides in der Jelly Rancher Website in der Abbildung dargestellt.
body {background-image: -webkit-Gradienten (linear, links oben, links unten, Farbe-Stop (0, blau), Color-stop (0,25, # 98fc45), Color-Stop (1, transparent)) -}Im Beispiel können Sie sehen, dass ein linearer Gradient wurde geschaffen, die an der Spitze und bewegt sich nach unten beginnt. Sie können die Gradienten variieren, indem sie es in der oberen linken Ecke beginnt und an der unteren rechten Ecke endet, die den Gradienten entlang einer diagonalen Pfad bilden würden. Es gibt auch mehrere Farbstopps im Beispiel gezeigt, von denen jede eine Farbe entlang des Gradienten darstellt. Die Steigung Beispiel schreitet wie folgt:
Beginnen Sie mit der Farbe blau: Farbanschlag (0, blau).
Ändern Sie in den hexadezimalen Farb # 98fc45 bei 25 Prozent: Farbanschlag (0,25, # 98fc45).
Dann # 98fc45 durch den Rest des Gradienten wird transparent, bis der Hintergrund vollständig transparent ist: Farbanschlag (1, transparent).