Zirkuläre und elliptische CSS3-Farbverläufe [CSS3-Tipps]
Heute werden wir unsere Diskussion fortsetzen CSS3-Farbverläufe. Im vorherigen Beitrag haben wir Ihnen gezeigt, wie Sie erstellen Lineare Gradienten. Dieses Mal werden wir ihren Verwandten abdecken, Kreisförmige und elliptische Farbverläufe.
Die Verlaufssyntax
Der Farbverlauf in CSS3 wird mit der deklariert Hintergrundbild Eigentum. Dies ist für eine bessere Kompatibilität, wenn wir auch hinzufügen müssen Hintergrundfarbe in einem einzigen Regelsatz, damit sie nicht miteinander kollidieren. Um dann den radialen Gradienten zu erstellen, nennen wir ihn einfach so Radialgradient () Funktion. Die Funktion enthält vier Werte, um den Verlauf richtig einzustellen.
Der erste Wert definiert das Steigungsposition. Wir können ein beschreibendes Schlüsselwort wie top, bottom, center und left verwenden, oder wir können auch spezifischer sein, 50% 50% um den Farbverlauf in der Mitte einzustellen oder 0% 0% um den Farbverlauf zu beginnen oben links.
Der zweite Wert definiert das Form und die Steigunggröße, Es gibt zwei Argumente, um die Farbverläufe zu gestalten, zuerst den Ellipse Welches ist die Standardeinstellung, und die zweite ist Kreis.
Und für die Gradientengröße, Wir können eines der folgenden sechs Argumente auswählen.
| Werte | Beschreibung |
|---|---|
nächste Seite | Die Form des Verlaufs trifft auf die Seite des Kastens, die dem Mittelpunkt am nächsten ist (für Kreise), oder trifft sowohl auf die vertikale als auch auf die horizontale Seite, die dem Mittelpunkt am nächsten ist (für Ellipsen).. |
nächste Ecke | Die Form des Verlaufs ist so bemessen, dass er genau die nächstliegende Ecke der Box von der Mitte aus trifft. |
am weitesten Seite | Ähnlich wie die nächste Seite, außer dass die Form so bemessen ist, dass sie auf die Seite des Kastens trifft, die am weitesten von der Mitte (oder der vertikalen und horizontalen Seite) entfernt ist.. |
äußerste Ecke | Die Form des Farbverlaufs ist so bemessen, dass er von der Mitte aus die äußerste Ecke des Kastens trifft. |
enthalten | Ein Synonym für |
Abdeckung | Ein Synonym für |
Tabellenquelle: Mozilla Developer Network.
Schließlich definieren die dritte und vierte die Farbkombination. So schreiben wir die Syntax zur Erstellung der Elliptisch Farbverläufe, und diesmal werden wir verwenden Abdeckung für die Gradientengröße, so dass es sich weit ausbreitet und den Behälter bedeckt;
Körper Hintergrundbild: radialer Gradient (Mitte, Ellipsenabdeckung, # ffeda3, # ffc800);
So erstellen Sie die Kreisförmig Farbverlauf können wir einfach so machen:
Körper Hintergrundbild: radialer Gradient (Mittelpunkt Mitte, Kreisabdeckung, # ffeda3, # ffc800);
Wie der Name schon sagt, ist die Verlaufsform ein Kreis.
Browser-Unterstützung
Beachten Sie jedoch, dass alle Browser die vollständige Unterstützung für diese Funktion anbieten und daher das Herstellerpräfix benötigen. Somit ist die gesamte Syntax, die in allen modernen Browsern funktionieren wird - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ und Opera 11+ - wird so aussehen;
Körper Hintergrundbild: radialer Gradient (Mitte unten, Ellipsenabdeckung, # ffeda3, # ffc800); Hintergrundbild: -o-radialer Gradient (Mitte unten, Ellipsenabdeckung, # ffeda3, # ffc800); Hintergrundbild: -ms-radialer Gradient (Mitte unten, Ellipsenabdeckung, # ffeda3, # ffc800); Hintergrundbild: -moz-radialer Gradient (Mitte unten, Ellipsenabdeckung, # ffeda3, # ffc800); Hintergrundbild: -webkit-radialer Gradient (Mitte unten, Ellipsenabdeckung, # ffeda3, # ffc800);
Schauen Sie sich die Demo an oder laden Sie die Quelle herunter, um mit Farbverläufen herumzuspielen.
- Demo
- Quelle herunterladen
Letzte Worte
Das Erstellen eines radialen CSS3-Farbverlaufs ist nicht so schwer, wie Sie denken, und vor allem, wenn Sie mit diesen Tools Hilfe beim Generieren von Code erhalten:
- Colorzilla-Farbverläufe
- Gradientoo
Der radiale Gradient ist nur ein Typ von CSS3-Gadgets. Wir werden unsere Diskussion über das Thema in zukünftigen Posts fortsetzen. Bleiben Sie also auf Hongkiat.com
