gradient.png

Farbverlauf.png

gradient.png ist eine benutzerdefinierte Web-App zur Bildgenerierung.

Anpassbare Funktionen:

• 2 - 5 Farben und ihre jeweiligen Prozentsätze
• Bildhöhe und -breite (in Pixel)
• Linearer oder radialer Farbverlauf
• Lineare Gradientengrade oder radiale Gradientenmitte

Laden Sie das Bild herunter (für Hintergrundbilder) oder kopieren Sie das CSS (für Divs)!

Installation

1. Klonen Sie dieses Repo
2. npm install
3. npm start

Motivation

Für viele Hintergrundanpassungsfunktionen ist das Hochladen eines Bildes erforderlich – Cover/Banner von Social-Media-Profilen, Gmail-Design, Hintergrundbild Ihres Telefons/Laptops. Für solche Fälle sind Farbverläufe eine gute Option. Sie sind hübsch, aber dennoch dezent und nicht ablenkend.

CSS Gradient existiert als anpassbarer Hintergrundgenerator mit Farbverlauf für Websites. Insbesondere generieren sie das CSS, das für die background eines Divs bereitgestellt werden kann. Diese Site bietet jedoch nicht die Möglichkeit, den generierten Farbverlauf als Bild zu exportieren. Ich habe beschlossen, diese Gelegenheit als Herausforderung für die Neugestaltung von UI/UX zu nutzen und zusätzlich die Funktion zum Exportieren von Bildern hinzuzufügen.

Das Ziel bestand darin, meine React-Fähigkeiten zu verbessern, mich an gute Webentwicklungspraktiken zu gewöhnen und eine intuitive und reaktionsfähige Benutzeroberfläche und -erfahrung zu generieren.

Abhängigkeiten

gradient.png verwendet die folgenden npm-Pakete:

• React App erstellen: Boilerplate für die App
• Material-UI: Schieberegler, Übergänge, Schaltflächen-Welleneffekt, Optionsgruppe
• React-Draggable: Ziehbare Auswahl für Sättigung/Wert
• Reaktionssymbole: Alle Symbole

Danksagungen

• Dora Zhao für das erste Modell
• CSS-Gradient für die Redesign-Inspiration
• Michael Jackson für Algorithmen zur Farbraumkonvertierung