使用这 50 多个资源提升你的 CSS 水平

大家好，今天我将分享可用于创建漂亮样式的 CSS 工具。

1. Layoutit 网格

Layoutit grid 是一款 CSS 网格布局生成器。使用我们简洁的编辑器快速绘制网页布局，并获取 HTML 和 CSS 代码，快速启动您的下一个项目。您也可以在 CodePen 上查看代码！

2. Sarah Drasner 的 CSS 网格生成器

3.网格示例

本网站汇集了示例、视频和其他信息，旨在帮助您学习 CSS 网格布局。由Rachel Andrew开发和维护。

4. CSS 网格花园

在学习 CSS Grid 的同时种植您的胡萝卜园。

5.精通游戏

在这里，您可以玩僵尸并练习 Flexbox；在学习 CSS Grid 的同时拯救可爱的外星物种。

6.格瑞德·马尔文

网格备忘单。

7. CSS技巧——网格完整指南

CSS Tricks 提供的 CSS 网格综合指南。

8.三次贝塞尔曲线

使用此工具快速生成和预览三次贝塞尔曲线。

9. CSS动画

使用这个易于使用的工具创建动画，它还支持 GSAP。

10. CSS动画101电子书

11.CSS餐厅

使用 CSS Diner 练习您的 CSS 定位技能。

12.弹性盒模式

在这里您可以获得许多使用 Flexbox 的技巧和模式。

13.弹性盒青蛙

14. Flexbox 备忘单

15. Devinduct 弹性盒

预览并查看 Flexbox 的代码。

16.弹性框防御

你的任务是阻止来袭的敌人突破你的防御。与其他塔防游戏不同，你必须使用 CSS 来定位你的塔！

17. CSS技巧年鉴

18.关键帧

非常简单的可视化工具可帮助您为项目生成 CSS。

使用类似于视频编辑软件的可视化时间线编辑器创建基本或复杂的 CSS @keyframe动画。

只需移动一些滑块即可创建单层或多层盒状阴影。立即获取 CSS 输出。

选择您最喜欢的颜色，在十六进制和 RGB 之间转换，并创建和保存调色板。

19. CSS 选择器备忘单

此备忘单旨在快速搜索 CSS 选择器。

20. CSS字体堆栈

从 Dan's Tools 获取 Web 安全字体以及更多内容。

21. Bennett Feely 的《Clippy》

获取您的剪辑路径并查看Bennett Feely的网站以查看他的所有工具。

22. Codrops CSS 参考

一份详尽的 CSS 参考资料，包含从基础开始学习 CSS 的所有重要属性和信息。

23. CSS 参考

另一个 CSS 参考资源。

24.前端导师

Frontend Mentor 有很多基于 HTML 和 CSS 的项目，您可以通过参与实际项目来完成挑战并提高您的风格。

25.代码播放器

视频风格的演示展示了从头开始创建的很酷的东西。

26. CSS数据库

cssdb 是 CSS 特性及其在成为实施的 Web 标准过程中所处位置的综合列表。

27.边框半径生成器

28.按钮创建器

29.最佳 CSS 按钮生成器

30. Samantha Ming 的趣闻

31.特异性计算器

直观地了解 CSS 特异性。您可以更改选择器，或将其粘贴到您自己的选择器中。

32.清洁 CSS

压缩你的 CSS。

33. 100 天 CSS 挑战

34. CSS布局

使用 CSS 制作的流行布局和图案的集合。

35.模式生成器

36.图案

37.图案垫

创造无限独特的设计图案。

38.图案 CSS

仅限 CSS 库，可使用美丽的图案填充空白背景。

39.免费前端

来自 codepen.io 和其他资源的免费 CSS 代码示例。

40.玻璃态 CSS 生成器

41. Smol CSS

现代 CSS 布局和组件的最少片段。

42.洛蒂档案

免费动画。

43.动画下划线

Michelle Barker 分享了一些有关下划线样式和动画的精彩技巧。

44. FontShare 的免费字体

这项名为 Fontshare 的服务对于使用过 Google Fonts 的人来说应该很熟悉。浏览字体列表，挑选你想要的样式，然后添加到你的网站。

45. BG罐

为您的网站、博客和应用程序提供免费的 SVG 背景生成器。

46.获得波浪

免费的 SVG 波生成器，可产生独特的 SVG 波。

47.自定义 SVG 形状分隔线

我们创建了这款免费工具，旨在帮助设计师和开发者更轻松地导出精美的 SVG
形状分隔线，用于他们的最新项目。希望您喜欢这款工具。

48. CSS 禅意花园

演示如何通过基于 CSS 的设计实现。从列表中选择任意样式表即可将其加载到此页面。

49. CSS压缩器

在线 CSS 压缩器/压缩器。免费！提供 API。简单、快速、高效。

50. CSS 备忘单

元素、选择器和样式的列表，以及指向其 MDN 页面的相关链接。

51.自动前缀

Autoprefixer 在线版 — 原版 Autoprefixer 的 Web 版本。它会解析你的 CSS，并使用 Can I Use 中的值将供应商前缀添加到 CSS 规则中。它是 Google 推荐的，Twitter 和淘宝也在使用它。

52.我应该加前缀吗

此页面有一个目的：简单地展示较新的 CSS 属性需要哪些前缀。

53. Brad Traversy 撰写的《开发人员设计资源》

精选的设计和 UI 资源列表，包括库存照片、网页模板、CSS 框架、UI 库、工具等。

54. Bem方法论

BEM 代表“块 (Block)，元素 (Element)，修饰符 (Modifier)”，它是 CSS 中的一种命名规范。更多信息，请访问官方网站。

55. CSS 备忘单

总结

如果您喜欢这篇文章，请在您的 Twitter 帐户上分享以支持我写更多文章，您也可以通过购买咖啡来支持我。

您可以在Twitter上关注我。

您可以查看我的其他帖子。