gradient.png

gradien.png

gradien.png adalah aplikasi web pembuatan gambar khusus.

Fitur yang dapat disesuaikan:

• 2 - 5 warna dan persentasenya masing-masing
• Tinggi dan lebar gambar (dalam piksel)
• Gradien linier atau radial
• Derajat gradien linier atau pusat gradien radial

Unduh gambarnya (untuk wallpaper) atau salin CSS (untuk div)!

Instalasi

1. Kloning repo ini
2. npm install
3. npm start

Motivasi

Banyak fitur penyesuaian latar belakang yang memerlukan pengunggahan gambar -- sampul/spanduk profil media sosial, tema Gmail, wallpaper ponsel/laptop Anda. Gradien adalah pilihan bagus untuk kasus seperti itu. Mereka cantik, namun tenang dan tidak mengganggu.

CSS Gradient hadir sebagai generator latar belakang gradien yang dapat disesuaikan untuk situs web. Secara khusus, mereka menghasilkan CSS yang dapat diberikan untuk properti background div. Namun, situs ini tidak memiliki opsi untuk mengekspor gradien yang dihasilkan sebagai gambar. Saya memutuskan untuk mengambil kesempatan ini sebagai tantangan desain ulang UI/UX, selain menambahkan fitur ekspor gambar.

Tujuannya adalah untuk mengasah keterampilan React saya, membiasakan praktik pengembangan web yang baik, serta menghasilkan antarmuka dan pengalaman pengguna yang intuitif dan responsif.

Ketergantungan

gradien.png menggunakan paket npm berikut:

• Buat Aplikasi React: Boilerplate untuk aplikasi tersebut
• Material-UI: Slider, Transisi, efek riak tombol, Grup Radio
• React-Draggable: Alat pilih Saturasi/Nilai yang dapat diseret
• React Icons: Semua ikon

Ucapan Terima Kasih

• Dora Zhao untuk maket awal
• Gradien CSS untuk inspirasi desain ulang
• Michael Jackson untuk algoritma konversi ruang warna