srcmini大家好，今天我将分享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
使用这个易于使用的工具创建动画，它还支持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.Autoprefixer
Autoprefixer在线- 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资源和工具了，如果你喜欢这篇文章，在你的社交平台上分享它，支持我写更多的东西，也可以分享到其它更多网站中。
评论前必须登录！
注册