把收藏力拉满，前端 50 个优质 Web 在线资源~

又来了，本瓜又来了~ 对于 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，以上便是本篇分享；请把收藏力拉满，拿走不谢！！

撰文不易，点赞鼓励👍👍👍👍👍👍

我是掘金安东尼，公众号同名，日拱一卒、日掘一金，再会~~