Wie mit linearen Verläufen in CSS3 to Work
Die meisten Menschen werden für ihre CSS3-Websites etwas ein wenig spannender als eine Hintergrundfarbe oder einem Rahmen möchten. Zum Beispiel kann man auf einem linearen Gradienten () Funktion verlassen, um die Aufgabe auszuführen. Unter Verwendung eines linearen Gradienten () können Sie erstellen Linien (horizontal, vertikal und schräg), Diamanten und Quadrate.
Wenn Sie das linear-Gradienten () mit anderen Gradientenverfahren (wie der radial-Gradienten ()) kombinieren kann man alle Arten von Mustern zu erstellen. Denn jetzt, erstellen Sie einen einfachen linearen Gradienten () mit dem folgenden Verfahren ein Gefühl dafür zu bekommen, wie sie funktionieren.
Erstellen Sie eine neue HTML5-Datei mit einem Texteditor.
Geben Sie den folgenden Code für die HTML-Seite.
Ein Nicht-Bild-Hintergrund Eine einfache Überschrift
Einfacher Text mit der Überschrift zu gehen.
Der Hauptzweck dieses Beispiels ist auf Hintergründen zu konzentrieren, so dass der Inhalt ist recht einfach. Alles, was Sie ist eine einfache Kopf- und Absatz zu sehen.
Speichern Sie die Datei als PatternedBackground.HTML.
Die Probe wird in anderen Kapiteln erscheinen, so Namensgebung ist wichtig.
Erstellen Sie eine neue CSS-Datei mit einem Texteditor.
Geben Sie den folgenden CSS-Style-Informationen.
body {background: linear-Gradienten (45 Grad, Purpurrot, Transparent, Royalblue) -background-color: # 00FF00-background-size: 100px 100px;}Im Mittelpunkt dieses Musters ist der Hintergrund-Eigenschaft, die auf dem linearen Gradienten () Funktion beruht. Sie können diese Funktion in einer Reihe von verwenden die Möglichkeiten-Beispiel eine einfache Art und Weise zeigt. Es beginnt mit den linearen Gradienten () Funktion sagt die Linie bei 45 Grad zu zeichnen.
Es gibt drei Farben im Farbverlauf: Purpurrot, die Hintergrundfarbe (Transparent zeigt den Hintergrund) und Royalblue. Die Steigung wird mit Crimson Übergang zum Hintergrundfarbe beginnen und enden mit Royalblue, die alle in gleichen Anteilen.
Die Eigenschaft background-color definiert einen Wert von grün in diesem Fall. Der Hintergrund-size Eigenschaft definiert die Größe des Verlaufsmuster. Es wäre einfach eine Reihe von verschiedenen Effekten zu erhalten unter Verwendung des gleichen linearen Gradienten () und Variieren dieser beiden letzten Eigenschaften.
Speichern Sie die Datei als PatternedBackground.CSS.
Die Probe wird in anderen Kapiteln erscheinen, so Namensgebung ist wichtig.
Speichern Sie die HTML-Datei und laden Sie die Seite.
Sie sehen den Hintergrund gezeigt, die eigentlich ziemlich dramatisch. Der Hintergrund wird automatisch die Wiedergabe unabhängig davon, wie der Benutzer die Fenstergröße ändert.
Es ist möglich, Grafiken und Steigungen zu kombinieren noch ungewöhnlicher Effekte ohne die Programmierung zurückgreifen zu erstellen. Einfach einen der Farbeinträge mit dem URL für eine herunterladbare Grafik mit dem url () Funktion ersetzen. Der resultierende Gradient wird kombinieren Farbe, Grafiken, Transparenz und Übergangseffekte für Sie einen ungewöhnlichen Hintergrund zu erstellen.