把收藏力拉满，前端 50 个优质 Web 在线资源~
这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战
本篇译自：https://enlear.academy/50-tool-online-for-front-end-developer-2021
又来了，本瓜又来了~ 对于 web 技术在线资源收集，绝不手软！
一个链接🔗，就是一个新世界🌏！开冲🏄！
1. Browser Default Styles
可以在 Browser Default Styles 中查询 HTML 元素在每个浏览器下的默认样式；
2. Clippy
可以在 Clippy 为你的图片作剪辑，并且生成对应的 css clip-path 属性；
3. CSS keyframes
CSS keyframes 可以帮助你创建 CSS 帧动画；
4. Neumorphism.io
Neumorphism.io 帮你创建新拟态的 UI 风格；
5. CSS Cursors
CSS Cursors 让你的光标足够酷；
6. CSS Grid Generator
CSS Grid Generator，作用如其名，帮助创建 CSS Gird；
7. Placeholder Image Generator
Placeholder Image Generator 帮助创建图片未加载出来的占位信息；
8. Htmldom
Htmldom：纯原生 JS 代码合集，帮助操作 DOM；
9. HTML5 head elements
HTML5 head elements 是 head 标签设置最强指南，真滴强；
10. Input Type Sandbox
设置并校验 Input 框输入，Input Type Sandbox 各种类型都有，专精尖；
11. Meta Tags
Meta Tags 帮你自动导出流行社交网络（如Facebook、Twitter、Google…）的 Meta Tags 以供使用；
12. Can I Include
Can I Include 帮你确定 HTML 元素之间是否可以嵌套；
13. Key codes
Key codes 帮你轻松找到键盘按键所对应的 keycodes 来设置事件监听；
14. Color contrast checker
Color contrast checker 帮你检查网页设计中两种颜色之间的对比度；
15. Git Command Explorer
Git Command Explorer 帮你充分了解和学习 Git 命令；
16. Make thumbnails
Make thumbnails 帮你轻松创建图像缩略图；
17. Can I Email
Can I Email 帮你查看电子邮件中可支持哪些 HTML 和 CSS 属性；
18. Trianglify
Trianglify 帮你的网站创作出美丽的背景；
19. CSS Layout
CSS Layout 收集了流行的 CSS 布局，帮你轻松选择合适的网站设计；
20. FANCY-BORDER-RADIUS
FANCY-BORDER-RADIUS 帮你通过使用 CSS BORDER-RADIUS 属性设置形状来设计对象；
21. 1loc
1loc 是一个聚合解决方案网站，帮你解决 JS 编程中经常遇到的各类问题；
22. Color Namer
Color Namer 让每一个颜色都有一个独特的名字；
23. BrowserFrame
BrowserFrame 给你的网站添加一个浏览器背景；
24. CSS Scan
CSS Scan 收集了超多 box-shadow 效果网站；
25. Favicon
Favicon 帮你创建免费的 FavIcon；
26. CSS Filter
CSS Filter 将 CSS Filter 玩出花来；
27. Simple CSS Media Query Generator
Simple CSS Media Query Generator 帮你轻松搞定媒体查询；
28. Mix Font
Mix Font 通过一种有趣且简单的方式来发现、创建新字体；
29. Omatsuri
Omatsuri 设计师工具集合网站，例如使用CSS创建三角形、创建网站光标显示样式、HTML符号等；
30. Underline Generator
Underline Generator 帮你创建美丽的下划线；
31. Checkboxes & Radios CSS Generator
Checkboxes & Radios CSS Generator 创建 Checkboxes & Radios；
32. Convert Images to Base64
Convert Images to Base64 将图片转为 base64 格式；
33. Responsively
Responsively 帮你查看多种设备下的网站效果；
34. UI Design Daily
UI Design Daily：UI 设计聚合网；
35. Devdocs
Devdocs：开发文档聚合网；
36. Shortcode
Shortcode 帮你用简短的代码解决编程中的常见问题；
37. Public-apis
Public-apis 为你的网站提供免费的 API，接入免费数据；
38. CSS Grid Layout Generator
CSS Grid Layout Generator 帮你用CSS快速构建复杂的网格系统；
39. CSS Duotone Generator
CSS Duotone Generator 帮你设置图像的CSS属性，例如图像的距离、不透明度、模糊、颜色等；
40. CSS3 Generator
CSS3 Generator 帮你快速创建复杂的 CSS3 属性，例如长方体阴影、渐变、过渡效果等。此外，对于每个属性，还提供了不同浏览器支持的详细信息；
41. Box Model
Box Model 帮你更直观的查web 对象填充设置、边距和边框属性等；
42. Animated CSS Background Generator
Animated CSS Background Generator 帮你借用颜色创建动画背景。此外，还提供一些其它属性配置，如计数、大小、平均速度等；
43. Web Code Tools
Web Code Tools ，通过输入属性值来设置CSS中的公共属性，并能直接预览效果；
44. Enjoy CSS
Enjoy CSS 帮你设置样式，设置即预览，享受它吧~
45. CSS Portal
CSS Portal，是一个 CSS 各类生成器集合站点；
46. CSS3 Generator OverDesign
CSS3 Generator OverDesign 帮你设置web设计中的常用属性；
47. HTML Table Generator
HTML Table Generator 帮你轻松设计网站表格；
48. Making CSS
Making CSS 是一个工具聚合网站，帮你轻松实现 CSS；
49. CSS Masonry Generator
CSS Masonry Generator 帮你实现可配置的图片瀑布流；
50. Generator of CSS background patterns
Generator of CSS background patterns 帮你轻松构建不同类型的网站背景；
小结
OK，以上便是本篇分享；请把收藏力拉满，拿走不谢！！
撰文不易，点赞鼓励👍👍👍👍👍👍
我是掘金安东尼，公众号同名，日拱一卒、日掘一金，再会~~
腾讯云开发者
