gradient.png

渐变.png

gradient.png 是一个自定义图像生成网络应用程序。

可定制功能：

• 2 - 5 种颜色及其各自的百分比
• 图像高度和宽度（以像素为单位）
• 线性或径向渐变
• 线性梯度度或径向梯度中心

下载图像（用于壁纸）或复制 CSS（用于 div）！

安装

1. 克隆这个仓库
2. npm install
3. npm start

动机

许多背景自定义功能需要上传图像 - 社交媒体个人资料封面/横幅、Gmail 主题、您的手机/笔记本电脑壁纸。对于这种情况，渐变是一个不错的选择。它们很漂亮，但又低调，不会让人分心。

CSS Gradient 作为网站的可定制渐变背景生成器存在。具体来说，它们生成可以为 div 的background属性提供的 CSS。但是，该网站没有将生成的渐变导出为图像的选项。除了添加图像导出功能之外，我决定利用这个机会作为 UI/UX 重新设计的挑战。

目标是磨练我的 React 技能，养成良好的 Web 开发实践的习惯，并生成直观且响应灵敏的用户界面和体验。

依赖关系

gradient.png 使用以下 npm 包：

• 创建 React App：应用程序的样板
• Material-UI：滑块、过渡、按钮波纹效果、单选组
• React-Draggable：饱和度/值可拖动选择器
• React 图标：所有图标

致谢

• 赵多拉 (Dora Zhu) 制作初始模型
• CSS 渐变为重新设计灵感
• 迈克尔·杰克逊的色彩空间转换算法