gradient.png

gradiente.png

gradiente.png é um aplicativo da web de geração de imagens personalizado.

Recursos personalizáveis:

• 2 a 5 cores e suas respectivas porcentagens
• Altura e largura da imagem (em pixels)
• Gradiente linear ou radial
• Graus de gradiente linear ou centro de gradiente radial

Baixe a imagem (para papéis de parede) ou copie o CSS (para divs)!

Instalação

1. Clonar este repositório
2. npm install
3. npm start

Motivação

Muitos recursos de personalização de plano de fundo exigem o upload de uma imagem - capas/banners de perfis de mídia social, tema do Gmail, papel de parede do seu telefone/laptop. Os gradientes são uma ótima opção para esses casos. Eles são bonitos, mas moderados e não distraem.

CSS Gradient existe como um gerador de fundo gradiente personalizável para sites. Especificamente, eles geram o CSS que pode ser fornecido para a propriedade background de um div. Porém, este site não possui a opção de exportar o gradiente gerado como imagem. Decidi aproveitar esta oportunidade como um desafio de redesign de UI/UX, além de adicionar o recurso de exportação de imagens.

O objetivo era aprimorar minhas habilidades em React, adquirindo o hábito de boas práticas de desenvolvimento web, bem como gerar uma interface e experiência de usuário intuitiva e responsiva.

Dependências

gradiente.png usa os seguintes pacotes npm:

• Criar aplicativo React: padrão para o aplicativo
• Material-UI: controles deslizantes, transições, efeito cascata de botão, grupo de rádio
• React-Draggable: seletor arrastável de saturação/valor
• Ícones React: todos os ícones

Agradecimentos

• Dora Zhao para a maquete inicial
• Gradiente CSS para inspiração de redesenho
• Michael Jackson para algoritmos de conversão de espaço de cores