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

35,153 阅读4分钟

这是我参与11月更文挑战的第15天,活动详情查看:2021最后一次更文挑战


本篇译自:enlear.academy/50-tool-onl…

又来了,本瓜又来了~ 对于 web 技术在线资源收集,绝不手软!

一个链接🔗,就是一个新世界🌏!开冲🏄‍!

1. Browser Default Styles

可以在 Browser Default Styles 中查询 HTML 元素在每个浏览器下的默认样式;

image.png

2. Clippy

可以在 Clippy 为你的图片作剪辑,并且生成对应的 css clip-path 属性;

image.png

3. CSS keyframes

CSS keyframes 可以帮助你创建 CSS 帧动画;

image.png

4. Neumorphism.io

Neumorphism.io 帮你创建新拟态的 UI 风格;

image.png

5. CSS Cursors

CSS Cursors 让你的光标足够酷;

image.png

6. CSS Grid Generator

CSS Grid Generator,作用如其名,帮助创建 CSS Gird;

image.png

7. Placeholder Image Generator

Placeholder Image Generator 帮助创建图片未加载出来的占位信息;

image.png

8. Htmldom

Htmldom:纯原生 JS 代码合集,帮助操作 DOM;

image.png

9. HTML5 head elements

HTML5 head elements 是 head 标签设置最强指南,真滴强;

image.png

10. Input Type Sandbox

设置并校验 Input 框输入,Input Type Sandbox 各种类型都有,专精尖;

image.png

11. Meta Tags

Meta Tags 帮你自动导出流行社交网络(如Facebook、Twitter、Google…)的 Meta Tags 以供使用;

image.png

12. Can I Include

Can I Include 帮你确定 HTML 元素之间是否可以嵌套;

image.png

13. Key codes

Key codes 帮你轻松找到键盘按键所对应的 keycodes 来设置事件监听;

image.png

14. Color contrast checker

Color contrast checker 帮你检查网页设计中两种颜色之间的对比度;

image.png

15. Git Command Explorer

Git Command Explorer 帮你充分了解和学习 Git 命令;

image.png

16. Make thumbnails

Make thumbnails 帮你轻松创建图像缩略图;

image.png

17. Can I Email

Can I Email 帮你查看电子邮件中可支持哪些 HTML 和 CSS 属性;

image.png

18. Trianglify

Trianglify 帮你的网站创作出美丽的背景;

image.png

19. CSS Layout

CSS Layout 收集了流行的 CSS 布局,帮你轻松选择合适的网站设计;

image.png

20. FANCY-BORDER-RADIUS

FANCY-BORDER-RADIUS 帮你通过使用 CSS BORDER-RADIUS 属性设置形状来设计对象;

image.png

21. 1loc

1loc 是一个聚合解决方案网站,帮你解决 JS 编程中经常遇到的各类问题;

image.png

22. Color Namer

Color Namer 让每一个颜色都有一个独特的名字;

image.png

23. BrowserFrame

BrowserFrame 给你的网站添加一个浏览器背景;

image.png

24. CSS Scan

CSS Scan 收集了超多 box-shadow 效果网站;

image.png

25. Favicon

Favicon 帮你创建免费的 FavIcon;

image.png

26. CSS Filter

CSS Filter 将 CSS Filter 玩出花来;

image.png

27. Simple CSS Media Query Generator

Simple CSS Media Query Generator 帮你轻松搞定媒体查询;

image.png

28. Mix Font

Mix Font 通过一种有趣且简单的方式来发现、创建新字体;

image.png

29. Omatsuri

Omatsuri 设计师工具集合网站,例如使用CSS创建三角形、创建网站光标显示样式、HTML符号等;

image.png

30. Underline Generator

Underline Generator 帮你创建美丽的下划线;

image.png

31. Checkboxes & Radios CSS Generator

Checkboxes & Radios CSS Generator 创建 Checkboxes & Radios;

image.png

32. Convert Images to Base64

Convert Images to Base64 将图片转为 base64 格式;

image.png

33. Responsively

Responsively 帮你查看多种设备下的网站效果;

image.png

34. UI Design Daily

UI Design Daily:UI 设计聚合网;

image.png

35. Devdocs

Devdocs:开发文档聚合网;

image.png

36. Shortcode

Shortcode 帮你用简短的代码解决编程中的常见问题;

image.png

37. Public-apis

Public-apis 为你的网站提供免费的 API,接入免费数据;

image.png

38. CSS Grid Layout Generator

CSS Grid Layout Generator 帮你用CSS快速构建复杂的网格系统;

image.png

39. CSS Duotone Generator

CSS Duotone Generator 帮你设置图像的CSS属性,例如图像的距离、不透明度、模糊、颜色等;

image.png

40. CSS3 Generator

CSS3 Generator 帮你快速创建复杂的 CSS3 属性,例如长方体阴影、渐变、过渡效果等。此外,对于每个属性,还提供了不同浏览器支持的详细信息;

image.png

41. Box Model

Box Model 帮你更直观的查web 对象填充设置、边距和边框属性等;

image.png

42. Animated CSS Background Generator

Animated CSS Background Generator 帮你借用颜色创建动画背景。此外,还提供一些其它属性配置,如计数、大小、平均速度等;

image.png

43. Web Code Tools

Web Code Tools ,通过输入属性值来设置CSS中的公共属性,并能直接预览效果;

image.png

44. Enjoy CSS

Enjoy CSS 帮你设置样式,设置即预览,享受它吧~

image.png

45. CSS Portal

CSS Portal,是一个 CSS 各类生成器集合站点;

image.png

46. CSS3 Generator OverDesign

CSS3 Generator OverDesign 帮你设置web设计中的常用属性;

image.png

47. HTML Table Generator

HTML Table Generator 帮你轻松设计网站表格;

image.png

48. Making CSS

Making CSS 是一个工具聚合网站,帮你轻松实现 CSS;

image.png

49. CSS Masonry Generator

CSS Masonry Generator 帮你实现可配置的图片瀑布流;

image.png

50. Generator of CSS background patterns

Generator of CSS background patterns 帮你轻松构建不同类型的网站背景;

image.png

小结

OK,以上便是本篇分享;请把收藏力拉满,拿走不谢!!

image.png

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

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