CSS3 Wiederholende Farbverläufe [CSS3-Tipps]
Es gibt viele CSS3-Funktionen, die die Art und Weise verändern, wie wir eine Website dekorieren. Eine davon ist CSS3-Farbverläufe. Vor CSS3 benötigen wir definitiv Bilder, um den Verlaufseffekt zu erzeugen. Jetzt können wir die gleichen (und besseren) Effekte erzielen, indem wir nur CSS verwenden
In unseren vorherigen Beiträgen haben wir zwei Arten von Gradienten diskutiert, die mit CSS3 erreicht werden können:
- Radial und
- Lineare Gradienten.
Dieses Mal werden wir in ihre Geschwister schauen: sich wiederholende Steigungen.
Grundwiederholung
Farbverläufe wiederholen ist im Wesentlichen eine Erweiterung. Die Syntax ähnelt der Definition von radialen und linearen Farbverläufen. Sie wird jedoch, wie der Name schon sagt, auch die Farben in einer bestimmten Richtung wiederholen. Um lineare Gradienten zu wiederholen, können wir diese Funktion verwenden: sich wiederholender linearer Gradient, Um radiale oder elliptische Farbverläufe zu wiederholen, verwenden wir diese Funktion: sich wiederholender radialer Gradient.
/ * Linear * / .gradient Hintergrund: sich wiederholender linearer Gradient (0 Grad, # f9f9f9, #cccccc 20px); / * Radial * / .gradient Hintergrund: sich wiederholender radialer Gradient (50% 50%, Kreis, # f9f9f9, #cccccc 20px);
Für den Rest gibt es nicht viel Unterschied, außer für den Code Farbwiederholung. Nachfolgend finden Sie eine einfache Illustration, um die Funktionsweise dieser Farbwiederholung zu beschreiben.
Obwohl das obige Bild nur für wiederholte lineare Farbverläufe zeigt, gilt die Grundidee auch für radiale Farbverläufe, bei denen sich die Farben in diesem Fall in jeder Richtung unendlich wiederholen. Folgen Sie dem Link unten, um die Demo zu sehen.
- Demo anzeigen
Im nächsten Abschnitt zeigen wir Ihnen, wie wir CSS3-Wiederholungsverläufe in realen Beispielen verwenden können.
Beispiel: Muster erstellen
Die häufigste Implementierung von Farbverläufe wiederholen ist, Hintergrundmuster zu erstellen. In diesem Beispiel werden einfache vertikale Streifenmuster erstellt.
.Farbverlauf Hintergrund: sich wiederholender linearer Gradient (0 Grad, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);
Beachten Sie, wie wir zwei verschiedene Farben definieren - # f9f9f9 und #cccccc - an derselben Stelle, 20px. Dieses Beispiel wird den Unterschied zwischen diesen beiden Farben schärfen und die Unschärfe beseitigen.
Um die Orientierung zu lenken, ändern wir einfach den Winkel - 90 Grad wird es horizontal lenken 45 Grad wird es diagonal richten und so weiter.
- Demo anzeigen
Beispiel: Paperline erstellen
In diesem zweiten Beispiel erstellen wir eine Paperline, die Sie häufig in einem Notizbuch sehen. Um diesen Effekt zu erzeugen, benötigen wir nur einen div, keine Bilder, nur CSS.
.Farbverlauf Breite: Auto; Höhe: 500px; Marge: 0 50px; Hintergrund: -webkit-sich wiederholender linearer Gradient (-90 Grad, # f9f9f9, # f9f9f9 20px, #cccccc 21px); Hintergrund: -moz-sich wiederholender linearer Gradient (-90 Grad, # f9f9f9, # f9f9f9 20px, #cccccc 21px); Hintergrund: -o wiederholender linearer Gradient (-90 Grad, # f9f9f9, # f9f9f9 20px, #cccccc 21px); Hintergrund: sich wiederholender linearer Gradient (-90 Grad, # f9f9f9, # f9f9f9 20px, #cccccc 21px); Hintergrundgröße: 100% 21px;
Beachten Sie, dass wir auch CSS3 hinzugefügt haben Hintergrundgröße Eigenschaft, für die die Größe der Hintergrundbilder festgelegt werden soll 100%, 20px. Obwohl CSS3-Farbverläufe "Farben" darstellen, werden sie eigentlich als Bilder kategorisiert, nicht Farbe.
Als nächstes werden wir verwenden :Vor Pseudoelement um einen Streifen auf der linken Seite des Papiers hinzuzufügen.
.Farbverlauf: vor content: ""; Anzeige: Inline-Block; Höhe: 500px; Breite: 4px; Rahmen links: 4px doppelt # FCA1A1; Position: relativ; links: 30px;
Und wir sind fertig, es ist wirklich einfach, oder? Wir können sie jetzt alle in Aktion sehen.
- Demo anzeigen
- Quelle herunterladen
Weitere Ressourcen
- Webkit CSS3-Farbverläufe
- CSS3-Farbverläufe im Microsoft Developer Network
