gradient.png

градиент.png

Gradient.png — это веб-приложение для создания собственных изображений.

Настраиваемые функции:

• 2–5 цветов и их соответствующие проценты
• Высота и ширина изображения (в пикселях)
• Линейный или радиальный градиент
• Линейные степени градиента или центр радиального градиента

Загрузите изображение (для обоев) или скопируйте CSS (для элементов div)!

Установка

1. Клонировать этот репозиторий
2. npm install
3. npm start

Мотивация

Многие функции настройки фона требуют загрузки изображения — обложки/баннеров профиля в социальных сетях, темы Gmail, обоев вашего телефона/ноутбука. Градиенты — отличный вариант для таких случаев. Они красивые, но приглушенные и не отвлекающие.

CSS Gradient существует как настраиваемый генератор градиентного фона для веб-сайтов. В частности, они генерируют CSS, который можно указать для свойства background элемента div. Однако на этом сайте нет возможности экспортировать созданный градиент в виде изображения. Я решил использовать эту возможность как задачу по редизайну UI/UX в дополнение к добавлению функции экспорта изображений.

Целью было отточить свои навыки работы с React, привыкнуть к хорошим практикам веб-разработки, а также создать интуитивно понятный и отзывчивый пользовательский интерфейс и опыт.

Зависимости

Gradient.png использует следующие пакеты npm:

• Создание приложения React: шаблон для приложения
• Материал-UI: ползунки, переходы, эффект пульсации кнопок, группа радио.
• React-Draggable: перетаскиваемый выбор насыщенности/значения
• Иконки React: все значки.

Благодарности

• Дора Чжао за первоначальный макет
• CSS-градиент для вдохновения при редизайне
• Майкл Джексон за алгоритмы преобразования цветового пространства