工欲善其事,必先利其器,一个优秀的前端除了拥有扎实的基本功外,还必须具备一个完善的工具库,关注作者,享受不一样的编程技巧。
样式动画类
EnjpyCSS
可在线编辑 CSS 样式并生成 CSS 代码
https://enjoycss.com/
Webframe
提供精美常用的 Web 页面并加以分类
https://webframe.xyz/
Glassmorphism CSS Generator
在线生成毛玻璃效果,并提供 HTML,CSS代码
https://ui.glass/generator/
GetWaves
波浪背景生成,可下载 SVG 或 复制 SVG 代码
https://getwaves.io/
Shapedivider
波浪背景生成,可控制形状、位置、颜色
https://www.shapedivider.app/
CSS Arrow
在线生成气泡框,可调整箭头方向
https://cssarrowplease.com/
CSS Grid Generator
在线生成 Grid 布局,可复制 HTML 和 CSS
https://cssgrid-generator.netlify.app/
cssfx
提供常用的动画小组件,如Loading、按钮滑动等效果,可直接复制 HTML 和 CSS 代码
https://cssfx.netlify.app/
Checklist Design
页面设计检查清单,当你没有UI设计师或者作为UI设计师,可以通过设计清单可以检查必要的设计要素或者容易忽略的设计元素
https://www.checklist.design/pages-checklists
背景色生成
https://webgradients.com/?ref=usniemvuilaptrinh
渐变背景色生成
https://cssgradient.io/
在线去除背景
https://www.remove.bg/zh/upload
logo,封面设计
https://www.canva.cn/en/?display-com-option=true
生成浪花
https://getwaves.io/
生成水滴
https://www.blobmaker.app/
生成形状
https://www.shapedivider.app/
动效生成
https://animista.net/
投影生成
https://shadows.brumm.af/
圆角生成
https://9elements.github.io/fancy-border-radius/
CSS 剪辑路径
https://bennettfeely.com/clippy/
形状各种生成
https://app.haikei.app/
Material 颜色调色版
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
工具类
图片无损压缩
https://tinypng.com/
nginx 在线配置
https://www.digitalocean.com/community/tools/nginx?global.app.lang=zhCN
Json 格式化
https://jsonformatter.curiousconcept.com/#
TodoMVC
https://todomvc.com/