Radial Gradient Rezepte

0
22

Radiale Farbverläufe sind ziemlich dang cool. Es ist erstaunlich, wir können die Farbe der hintergrund eines Elements mit Ihnen so leicht. Einfach ist ein relativer Begriff wenn. Es ist sicherlich einfacher, als brauchen zu erstellen eine Grafik in der third-party-software, um Sie als hintergrund verwenden möchten, und die syntax ist sehr erlernbar. Aber es ist auch nicht leicht zu merken, wenn Sie ihn nicht verwenden oft, und es ist komplizierter, als linear-gradient().

Ich dachte, ich würde zusammen eine Seite mit Referenz-Beispiele, so dass, wenn Sie wissen, was Sie brauchen, aber vergessen, die syntax, es ist leicht zu finden, die starter-code-Beispiel hier.

Zentriert Platzt

Die einfachste syntax stellen die erste Farbe in der Mitte des Elements und der zweiten Farbe auf der Außenseite und das ist, dass:

Finden Sie den Stift Radial Gradient – Zentriert von Chris Coyier (@chriscoyier) auf CodePen.

Das dehnen der Farbverlauf in eine ellipse auf einer nicht-quadratischen element. Wenn Sie dies nicht möchten, können Sie erzwingen, dass die Form zu einem Kreis, wie das zweite Beispiel hier zeigt:

Finden Sie den Stift Radial Gradient – Kreis vs. Ellipse von Chris Coyier (@chriscoyier) auf CodePen.

Sie können auch Steuern Sie die Größe, indem Sie buchstäblich sagen, wie groß der Kreis/ellipse sein soll (die endgültige Farbe wird sich noch Strecken, um die Abdeckung des Elements) durch:

  • Mithilfe einer keyword-closest-side, farthest-side, closest-corner, farthest-corner
  • Explizit sagen, wie radial-gradient(circle 100px, …)
  • Mithilfe von Farbmarkierungen wie radial-gradient(#56ab2f, #a8e063 150px)

Finden Sie den Stift Radial Gradient – Dimensionierung von Chris Coyier (@chriscoyier) auf CodePen.

Hier ist einige der Sachen in Gebrauch:

Finden Sie die Stift-Nutzung von Radialen Verläufen von Chris Coyier (@chriscoyier) auf CodePen.

Finden Sie den Stift Leuchtet text von Chris Coyier (@chriscoyier) auf CodePen.

Positioniert

Neben der Kontrolle der Größe und Form des Verlaufs, das andere große trick, um zu wissen, mit radialen Verläufen ist, dass Sie können die position der Mitte von Ihnen.

Dies ist ein Manko, finde ich, mit Farbverlauf-Generatoren. Sie helfen Ihnen, wählen Sie Farben und farbgrenzen und so, aber Sie in der Regel punt auf die Positionierung Zeug.

Dies ist ein schöner Verlauf-Werkzeug, aber nicht zur Positionierung oder Dimensionierung. Einige von Ihnen tun helfen, ein wenig mit der Positionierung (siehe “Expert” – Einstellungen), aber don ‘ T setzen Sie alle Möglichkeiten.

Der Mittelpunkt eines radialen Verlaufs nicht in der Mitte! Sie können beispielsweise die position der Mitte in der oberen linken wie diese:

.element {
background: radial-gradient(
oben Links,
var(–Licht), var (- dunkel) /* Verwendung von Variablen nur zum Spaß! */
)
}

Hier sind alle vier Ecken:

Finden Sie den Stift Positioniert Radialen Gradienten von Chris Coyier (@chriscoyier) auf CodePen.

Sie können auch sehr speziell positioniert. Hier ist ein Beispiel für einen Farbverlauf exakt positioniert 195px von der linken Seite an der Unterseite des Elements. Es hat auch eine bestimmte Größe, aber sonst funktioniert die Standard-ellipse Form:

.element {
background: radial-gradient(
150px 40px bei 195px unten,
#666, #222
);
}

Finden Sie den Stift, die Speziell positioniert Verlauf von Chris Coyier (@chriscoyier) auf CodePen.

Eine andere kleine Sache zu wissen, dass Sie verwenden können, transparent in den Verläufen setzen Sie die Farbe hinter sich, wenn nötig, teilweise oder transparente Farben, wie rgba(255, 255, 255, 0.5) das gleiche zu tun, bei der eine eingefärbte Farbe stoppen.

Auch, radiale Farbverläufe verwendet werden können, mit mehreren Hintergründen, die Anwendung mehrerer von Ihnen auf ein einziges element, sogar überschneidungen!

.element {
hintergrund:
radial-gradient(
Kreis, oben Links,
rgba(255, 255, 255, 0.5),
100px transparent
),
radial-gradient(
Kreis oben rechts,
rgba(255, 255, 255, 0.5),
100px transparent
),
radial-gradient(
unten Links,
rgba(255, 0, 255, 0.5),
400px transparent
),
radial-gradient(
unten rechts
rgba(255, 100, 100, 0.5),
400px transparent
);
}

Finden Sie den Stift Mehrere Verläufe von Chris Coyier (@chriscoyier) auf CodePen.

Markieren Sie die Idee, dass die Mitte des Gradienten kann überall sein, hier ist eine Steigung folgt, dass die Maus:

Finden Sie den Stift Radial-Gradient Verschieben Mit der Maus, von Leo Sammarco (@lsammarco) auf CodePen.

Ressourcen

Menschen neigen dazu zu denken, browser-Unterstützung, und das zu Recht, aber nicht zu Doll drüber nachdenken, in diesem Fall. Wir sind ziemlich viel über das board-support-auch ohne Präfixe.

  • Es ist auch zu wiederholen-linear-gradient() und hier die Ana Tudor bekommt in einigen Details und Anwendungsfälle.
  • Müssen einige Farben, die gut zusammen in einem Verlauf? uiGradients ist schön.
  • MDN-auf radial-gradient
  • Sehen Sie unsere komplette Anleitung um alle Verläufe hier!

OK bye!

Finden Sie den Stift CSS-Sunset Sunrise von Marty Saetre (@msaetre) auf CodePen.