gradient.png

gradiente.png

gradient.png es una aplicación web de generación de imágenes personalizada.

Funciones personalizables:

• 2 - 5 colores y sus respectivos porcentajes
• Alto y ancho de la imagen (en píxeles)
• Degradado lineal o radial
• Grados de gradiente lineal o centro de gradiente radial

¡Descarga la imagen (para fondos de pantalla) o copia el CSS (para divs)!

Instalación

1. Clonar este repositorio
2. npm install
3. npm start

Motivación

Muchas funciones de personalización de fondo requieren cargar una imagen: portadas/banners de perfil de redes sociales, tema de Gmail, fondo de pantalla de su teléfono/computadora portátil. Los degradados son una gran opción para estos casos. Son bonitos, pero discretos y no distraen.

CSS Gradient existe como un generador de fondos degradados personalizable para sitios web. Específicamente, generan el CSS que se puede proporcionar para la propiedad background de un div. Sin embargo, este sitio no tiene la opción de exportar el degradado generado como una imagen. Decidí aprovechar esta oportunidad como un desafío de rediseño de UI/UX, además de agregar la función de exportación de imágenes.

El objetivo era perfeccionar mis habilidades de React, adquirir el hábito de buenas prácticas de desarrollo web, así como generar una interfaz y experiencia de usuario intuitiva y responsiva.

Dependencias

gradient.png utiliza los siguientes paquetes npm:

• Crear aplicación React: modelo estándar para la aplicación
• Material-UI: controles deslizantes, transiciones, efecto dominó de botones, grupo de radio
• React-Draggable: selector arrastrable de saturación/valor
• Reaccionar iconos: todos los iconos

Expresiones de gratitud

• Dora Zhao para la maqueta inicial
• Degradado CSS para la inspiración del rediseño
• Michael Jackson para algoritmos de conversión de espacios de color