Mischen Sie Ihre eigenen CSS-Farbverläufe mit dieser kostenlosen Web-App

Jeder Webdesigner sollte etwas darüber wissen CSS3-Gradienten. Sie gibt es schon seit Jahren und werden von allen gängigen Browsern umfassend unterstützt.

Und jetzt kostenlose Web-Apps wie Mischung lassen Sie CSS3-Farbverläufe im Handumdrehen erstellen visuelle Editoren im Browser. Sie können zwischen wählen lineare und radiale Gradienten beim basteln mit farben zum mischen.

Die erste Seite wird mit geladen zwei einfarbige farben beiderseits. Du kannst den ... benutzen Farbpalette zwischen den Farbtönen wechseln oder einen eingeben manueller HEX-Code Wenn Sie die Farbe kennen, die Sie möchten. Wenn Sie zwei Farben ausgewählt haben, klicken Sie auf die Schaltfläche “Lass uns mischen” Taste Im Zentrum.

Beide Farben verschmelzen zu einem CSS3-Farbverlauf mit bearbeitbare Optionen am oberen Rand der Seite. Sie können zwischen wählen lineare Gradienten & radiale Steigungen, und wenn Sie den linearen Stil verwenden, können Sie Ziehen Sie die mittlere Position überall auf der Seite.

Plus, während du bist im Mischmodus Du kannst immer noch zurückgehen Ändern Sie die Farben unten. Dies ist wie der perfekte Code-freie CSS3-Gradientengenerator, den jeder Designer benötigt.

Sobald Sie zwei Farben haben, können Sie auf klicken Code-Klammer-Symbol in der oberen rechten Ecke. Das bringt ein Fenster mit CSS-Code dass Sie in Ihre Stylesheets kopieren / einfügen können.

Blend ist ein kostenloses Tool, das vom NYC-Designer Colin Keany erstellt wurde. Es ist auch auf seiner Website gehostet, obwohl ich nirgendwo einen Link zu GitHub oder freien Quellcode sehe. Aber er hat geschrieben eine Fallstudie Detaillierte Beschreibung seines Prozesses zur Erstellung von Blend mit all seinen praktischen Funktionen.

Leider die aktuelle Version unterstützt nicht mehr als zwei Farben. Ich drücke aber in Zukunft die Daumen für mehrfarbige Optionen.

Da Sie keine lokale Kopie herunterladen können, empfiehlt es sich, Blend für die spätere Verwendung zu markieren. Es ist der perfekte Weg zu Testgradienten ohne Ihr Stylesheet wiederholt zu bearbeiten.

Wenn Sie Ihre Ideen teilen oder einfach nur danke für dieses Verlaufswerkzeug sagen möchten, können Sie Colin @colinkeany twittern.