对于 web 技术在线资源收集,绝不手软!
一个链接,就是一个新世界!开冲?!
1.Browser Default Styles
https://browserdefaultstyles.com/
可以在 Browser Default Styles 中查询 HTML 元素在每个浏览器下的默认样式;
2.Clippy
https://bennettfeely.com/clippy/
可以在 Clippy 为你的图片作剪辑,并且生成对应的 css clip-path 属性;
3.CSS keyframes
https://keyframes.app/animate/
CSS keyframes 可以帮助你创建 CSS 帧动画;
4.Neumorphism.io
https://neumorphism.io/#55b9f3
Neumorphism.io 帮你创建新拟态的 UI 风格;
5.CSS Cursors
https://csscursor.info/
CSS Cursors 让你的光标足够酷;
6.CSS Grid Generator
https://cssgrid-generator.netlify.app/
CSS Grid Generator,作用如其名,帮助创建 CSS Gird;
7.Placeholder Image Generator
https://placeholderimage.dev/
Placeholder Image Generator 帮助创建图片未加载出来的占位信息;
8.Htmldom
https://htmldom.dev/
HTMLdom:纯原生 JS 代码合集,帮助操作 DOM;
9.HTML5 head elements
https://htmlhead.dev/
HTML5 head elements 是 head 标签设置最强指南,真滴强;
10.Input Type Sandbox
https://inputtypes.com/
设置并校验 Input 框输入,Input Type Sandbox 各种类型都有,专精尖;
11.Meta Tags
https://metatags.io/
Meta Tags 帮你自动导出流行社交网络(如Facebook、Twitter、Google…)的 Meta Tags 以供使用;
12.Can I Include
https://caninclude.glitch.me/
Can I Include 帮你确定 HTML 元素之间是否可以嵌套;
13.Key codes
https://keycode.info/
Key codes 帮你轻松找到键盘按键所对应的 keycodes 来设置事件监听;
14.Color contrast checker
https://polypane.app/color-contrast/
Color contrast checker 帮你检查网页设计中两种颜色之间的对比度;
15.Git Command Explorer
https://gitexplorer.com/
Git Command Explorer 帮你充分了解和学习 Git 命令;
16.Make thumbnails
http://makethumbnails.com/#dropzone
Make thumbnails 帮你轻松创建图像缩略图;
17.Can I Email
https://www.caniemail.com/
Can I Email 帮你查看电子邮件中可支持哪些 HTML 和 CSS 属性;
18.Trianglify
https://trianglify.io/
Trianglify 帮你的网站创作出美丽的背景;
19.CSS Layout
https://csslayout.io/
CSS Layout 收集了流行的 CSS 布局,帮你轻松选择合适的网站设计;
20.FANCY-BORDER-RADIUS
https://9elements.github.io/fancy-border-radius/
FANCY-BORDER-RADIUS 帮你通过使用 CSS BORDER-RADIUS 属性设置形状来设计对象;
21.1loc
https://1loc.dev/
1loc 是一个聚合解决方案网站,帮你解决 JS 编程中经常遇到的各类问题;
22.Color Namer
https://colornamer.netlify.app/
Color Namer 让每一个颜色都有一个独特的名字;
23.BrowserFrame
https://browserframe.com/
BrowserFrame 给你的网站添加一个浏览器背景;
24.CSS Scan
https://getcssscan.com/css-box-shadow-examples
CSS Scan 收集了超多 box-shadow 效果网站;
25.Favicon
https://favicon.io/
Favicon 帮你创建免费的 FavIcon;
26.CSS Filter
https://www.cssfilters.co/
CSS Filter 将 CSS Filter 玩出花来;
27.Simple CSS Media Query Generator
https://simplecss.eu/
Simple CSS Media Query Generator 帮你轻松搞定媒体查询;
28.Mix Font
https://www.mixfont.com/
Mix Font 通过一种有趣且简单的方式来发现、创建新字体;
29.Omatsuri
https://omatsuri.app/triangle-generator
Omatsuri 设计师工具集合网站,例如使用CSS创建三角形、创建网站光标显示样式、HTML符号等;
30.Underline Generator
https://underline-generator.netlify.app/
Underline Generator 帮你创建美丽的下划线;
31.Checkboxes & Radios CSS Generator
https://bun.js.org/
Checkboxes & Radios CSS Generator 创建 Checkboxes & Radios;
32.Convert Images to Base64
https://www.base64-image.de/
Convert Images to Base64 将图片转为 base64 格式;
33.Responsively
https://responsively.app/
Responsively 帮你查看多种设备下的网站效果;
34.UI Design Daily
https://www.uidesigndaily.com/
UI Design Daily:UI 设计聚合网;
35.Devdocs
https://devdocs.io/
Devdocs:开发文档聚合网;
36.Shortcode
https://shortcode.dev/javascript-cheatsheet#javascript-cheatsheet
Shortcode 帮你用简短的代码解决编程中的常见问题;
37.Public-apis
https://public-apis.io/
Public-apis 为你的网站提供免费的 API,接入免费数据;
38.CSS Grid Layout Generator
https://css-grid-layout-generator.pw/
CSS Grid Layout Generator 帮你用CSS快速构建复杂的网格系统;
39.CSS Duotone Generator
https://cssduotone.com/
CSS Duotone Generator 帮你设置图像的CSS属性,例如图像的距离、不透明度、模糊、颜色等;
40.CSS3 Generator
http://css3generator.com/
CSS3 Generator 帮你快速创建复杂的 CSS3 属性,例如长方体阴影、渐变、过渡效果等。此外,对于每个属性,还提供了不同浏览器支持的详细信息;
41.Box Model
https://codepen.io/carolineartz/full/ogVXZj
Box Model 帮你更直观的查web 对象填充设置、边距和边框属性等;
42.Animated CSS Background Generator
https://wweb.dev/resources/animated-css-background-generator/
Animated CSS Background Generator 帮你借用颜色创建动画背景。此外,还提供一些其它属性配置,如计数、大小、平均速度等;
43.Web Code Tools
https://webcode.tools/generators/css
Web Code Tools ,通过输入属性值来设置CSS中的公共属性,并能直接预览效果;
44.Enjoy CSS
https://enjoycss.com/
Enjoy CSS 帮你设置样式,设置即预览,享受它吧~
45.CSS Portal
https://www.cssportal.com/css-generators.php
CSS Portal,是一个 CSS 各类生成器集合站点;
46.CSS3 Generator OverDesign
http://ds-overdesign.com/
CSS3 Generator OverDesign 帮你设置web设计中的常用属性;
47.HTML Table Generator
https://www.quackit.com/html/html_table_generator.cfm
HTML Table Generator 帮你轻松设计网站表格;
48.Making CSS
https://makingcss.com/
Making CSS 是一个工具聚合网站,帮你轻松实现 CSS;
49.CSS Masonry Generator
https://w3bits.com/tools/masonry-generator/
CSS Masonry Generator 帮你实现可配置的图片瀑布流;
50.Generator of CSS background patterns
https://online-free-tools.com/en/css_pattern_generator_background
Generator of CSS background patterns 帮你轻松构建不同类型的网站背景;
小结
OK,以上便是本篇分享;请把收藏力拉满,拿走不谢!!
撰文不易,点赞鼓励
我是掘金安东尼: 一名人气前端技术博主(文章 100w+ 阅读量)
终身写作者(INFP 写作人格)
坚持与热爱(简书打卡 1000 日)
陪你一起度过漫长技术岁月吧(以梦为马)
觉得不错,点个赞吧(您的三连,我最大的动力 )
如若转载,请注明出处:https://www.dasum.com/31210.html