Tool-Tipp: Farbverläufe mit CSS für Hintergründe und Buttons

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Farbverläufe machen das bisweilen trist wirkende Flat Design interessanter. Es ist daher stets nützlich, ein paar entsprechende Optionen zur Hand zu haben.

Natürlich kannst du auch selber Farbmischung um Farbmischung ersinnen, die beiden folgenden Tools befreien dich jedoch von diesem Kreativprozess, so dass dir mehr Kapazität für die eigentliche Arbeit bleibt. Zudem kannst du beide Tools in Kombination verwenden. Schauen wir sie uns an.

WebGradients: 180 mehr oder minder komplexe CSS-Farbverläufe

Das Projekt WebGradients des russischen Studios itmeo liefert dir 180 CSS-Farbverläufe für die direkte Verwendung. Per Klick auf “Copy CSS” an jedem dargestellten Farbkreis wird der erforderliche CSS-Code in die Zwischenablage kopiert, aus welcher du ihn dann per STRG + V wieder zurückholst. Klickst du den jeweiligen Farbkreis direkt an, wird eine bildschirmfüllende Vorschau des Verlaufs angezeigt. Das Icon mit dem Pfeil nach unten startet den Download des Verlaufs als PNG-Datei.

Zusätzlich stehen sämtliche Gradienten als Bundle für Sketch und Photoshop in jeweils einer einzelnen Datei zum Download bereit. Der Download wird über Paddle.com abgewickelt. Du musst eine gültige E-Mail-Adresse eingeben, an die der Download-Link gesendet werden kann.

Für die Verläufe wird die CSS-Eigenschaft background-image genutzt. Die Definition eines Gradienten sieht dann beispielweise so aus:

background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);

Was zu diesem Verlauf führen würde:

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Gradientbuttons von Colorion

Gradientbuttons ist eine Teilmenge des weit größeren Gesamtangebots des Betreibers von Colorion. Colorion bietet kuratierte Farbpaletten für Designer im Allgemeinen und Flat, sowie Material Design im Besonderen. Der Dienst entstammt dem Schaffen des slowakischen Full-Stack-Entwicklers Csaba Kissi.

Der Unterschied zwischen WebGradients und Gradientbuttons besteht ausschließlich darin, dass die Verläufe auf Gradientbuttons rein zum Zwecke der Darstellung von Schaltflächen verwendet werden. Zur Definition des Verlaufes kommt noch ein Hover-Effekt hinzu und fertig ist der Button.

.btn-grad {background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%)}
.btn-grad:hover { background-position: right center; }

Wie du anhand des Snippets siehst, eignen sich die beiden Tools sehr gut in Kombination, denn auf Gradientbuttons nicht vorhandene Verläufe etwa aus WebGradients setzt du sehr einfach in der vorgegebenen Systematik um.

Die bereits vorhandenen Gradientbuttons werden in einem Grid auf der Landing Page angezeigt. Die Hover-Effekte werden beim Überfahren mit der Maus direkt ausgeführt. Unterhalb der individuellen Schaltfläche reicht ein Klick auf “Get CSS Code”, um ein Modal mit dem jeweiligen Anweisungstext aufzurufen. Von dort aus kopierst du den Schnipsel dann in die Zwischenablage.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

1 Kommentar auf "Tool-Tipp: Farbverläufe mit CSS für Hintergründe und Buttons"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Csaba Kissi
Gast

Thank you Dieter for mentioning Gradient Buttons on your blog.

wpDiscuz