大家好，今天我将分享CSS工具和CSS资源，你可以用它来创建漂亮的样式。
文章图片
1. Layoutit Grid Layoutit grid是一个CSS网格布局生成器。快速绘制网页布局与我们干净的编辑器，并获得HTML和CSS代码，以快速启动你的下一个项目。此外，你可以在CodePen上看到代码！
文章图片
2. CSS Grid Generator
文章图片
3. 网格例子这个网站是一个例子，视频和其他信息的集合，以帮助你学习CSS网格布局。由Rachel Andrew开发和维护。
文章图片
4. CSS Grid Garden 在学习CSS网格的同时种植你的胡萝卜花园。
文章图片
5. Mastery Games 在这里你可以玩Zombies游戏和练习flex，在学习CSS网格的同时拯救一个可爱的外星物种。
文章图片
6. Grid Malven 网格备忘单。
文章图片
7. CSS Tricks – 一个完整的指南网格 全面的指南，以及CSS网格布局的技巧。
文章图片
8. Cubic Bezier 用这个工具快速生成和预览一个三次bezier。
文章图片
9. CSS Animation 【用这50多个资源来升级你的CSS】使用这个易于使用的工具创建动画，它还支持GSAP。
文章图片
10. CSS动画电子书： CSS Animation 101 E-book
文章图片
11. CSS Diner 练习你的CSS定位技能与CSS晚餐。
文章图片
12. Flexbox Patterns 在这里，你可以在使用flex时获得很多技巧和模式。
文章图片
13. Flexbox Froggy
文章图片
14. Flexbox Cheatsheet
文章图片
15. Devinduct Flexbox 预览并查看flex的代码。
文章图片
16. Flexbox Defense 你的任务是阻止敌人通过你的防御。不像其他塔防游戏，你必须用CSS定位你的塔!
文章图片
17. CSS Tricks Almanac
文章图片
18. Keyframes 非常简单的可视化工具，可以帮助你为你的项目生成CSS。
使用类似于视频编辑软件的可视时间轴编辑器创建基本或复杂的CSS @keyframe动画。
通过移动一些滑块创建单个或多层的盒子阴影。立即获得CSS输出。
选择你最喜欢的颜色，在十六进制和rgb之间转换，并创建和保存调色板。
文章图片
19. CSS Selectors Cheatsheet 这个备忘单是为快速搜索CSS选择器而设计的。
文章图片
20. CSS Font Stack 从丹的工具得到网络安全字体和更多。
文章图片
21. Clippy找到你的clip-paths，也可以到班尼特·菲利(Bennett Feely)的网站查看他所有的工具。
文章图片
22. Codrops CSS Reference 一个广泛的CSS参考与所有重要的属性和信息从基础学习CSS。
文章图片
23. CSS Reference 另一个CSS参考资源。
文章图片
24. Frontend Mentor Frontend Mentor有很多基于HTML和CSS的项目，你可以通过在现实项目中工作来完成挑战和改进你的风格。
文章图片
25. The Code Player 视频风格的攻略显示酷的东西是从零开始创建。
文章图片
26. CSS DB css db是一个全面的CSS特性列表，以及它们在实现web标准过程中的位置。
文章图片
27. Border Radius Generator
文章图片
28. Button Creator
文章图片
29. Best CSS Button Generator
文章图片
30. Samantha Ming’ s Tidbits
文章图片
31. Specificity Calculator 一种直观的方式来理解CSS的特殊性。更改选择器或将它们粘贴到你自己的选择器中。
文章图片
32. Clean CSS 压缩CSS。
文章图片
33. 100 Days CSS Challenge
文章图片
34. CSS Layout 用CSS制作的流行布局和图案的集合。
文章图片
35. Pattern Generator
文章图片
36.Paaatterns
文章图片
37. Pattern Pad 创造无限独特的设计模式。
文章图片
38. Pattern CSS CSS唯一的库，填补你的空背景与美丽的图案。
文章图片
39. Free Frontend 来自codepen.io的免费CSS代码示例和其他资源。
文章图片
40. Glassmorphism CSS Generator
文章图片
41. Smol CSS 现代CSS布局和组件的最小片段。
文章图片
42. Lottie Files 免费的动画。
文章图片
43. Animating Underlines Michelle Barker分享了一些关于下划线样式和动画的奇妙技巧。
文章图片
44. Free Fonts by FontShare 使用过谷歌字体的人都会熟悉这项名为Fontshare的服务。浏览字体列表，选择你想要的样式，并将它们添加到你的网站。
文章图片
45.BG Jar免费的SVG背景生成器为你的网站，博客，和应用程序。
文章图片
46. Get Waves 一个免费的SVG波发生器，使独特的SVG波。
文章图片
47. Custom SVG Shape Dividers 我们创建这个免费工具是为了让设计人员和开发人员更容易导出漂亮的SVG
为他们最新的项目形状分隔。我们希望你喜欢这个工具。
文章图片
48. CSS Zen Garden 一个通过基于css的设计可以完成的演示。从列表中选择任何样式表将其加载到此页中。
文章图片
49. CSS Minifier 在线CSS缩小镜/压缩机。免费的!提供了一个API。简单快捷又快速。
文章图片
50. CSS Cheatsheet 元素、选择器和样式的列表，以及到它们的MDN页面的相关链接。
文章图片
51.AutoprefixerAutoprefixer在线- web repl为原始Autoprefixer。它解析你的CSS，并使用Can I Use中的值将供应商前缀添加到CSS规则中。谷歌推荐，Twitter和淘宝使用。
文章图片
52. Should I Prefix 这个页面有一个目的:简单地显示一个新的CSS属性需要什么前缀。
文章图片
53. Design Resources for Developers 从股票照片，web模板，CSS框架，UI库，工具，和更多的设计和UI资源的策划列表。
文章图片
54. Bem Methodology BEM代表“块，元素，修饰符”，这是CSS中的命名约定。更多信息请访问官方网站。
文章图片
55. CSS Cheatsheet
文章图片
结束以上就是所有的CSS资源和工具了，如果你喜欢这篇文章，在你的社交平台上分享它，支持我写更多的东西，也可以分享到其它更多网站中。
推荐阅读
- Python中input()和raw_input()函数之间的区别
- Nginx安装和主要配置文件详解
- 宝塔面板7.7.0最新开心版下载安装
- 初步探索yakit单兵作战工具
- JavaScript 之 Proxy
- 六种模式史上最强c语言俄罗斯方块
- Java深层系列「并发编程系列」深入分析和研究MappedByteBuffer的实现原理和开发指南
- 分布式项目中，选型与依赖管理
- 从商详页看多线程编排