英文 | https://hulyakarakaya.medium.com/level-up-your-css-with-these-38-resources-c0de7ecd8714

翻译 | 杨小二

大家好，今天我将向你分享38个可以用来创建漂亮样式的 css 工具。

1、layoutit grid

地址：https://grid.layoutit.com/

layoutit grid 是一个 css grid 布局生成器。使用干净的编辑器可以快速绘制网页布局，并获取html和css代码以快速启动你的下一个项目。你也可以在 codepen上看到代码！

2、sarah drasner 的 css 网格生成器

地址：
https://cssgrid-generator.netlify.app/

该站点收集了示例、视频和其他信息，可帮助你学习 css 网格布局。由rachel andrew开发和维护。

3、grid by example

地址：
https://gridbyexample.com/

4、css grid garden

地址：
https://cssgridgarden.com/

在学习 css grid 的同时种植您的胡萝卜园。

5、mastery games

地址：https://mastery.games/

在这里，你可以奠定周围的僵尸和实践flexbox的; 在学习 css 网格的同时拯救一个可爱的外星物种。

6、grid malven

地址：https://grid.malven.co/

7、css tricks

地址：
https://css-tricks.com/snippets/css/complete-guide-grid/

css tricks 的 css 网格综合指南。

8、三次贝塞尔

地址：https://cubic-bezier.com/#.17,.67,.83,.67

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

9、css 动画

地址：http://cssanimation.io/

使用这个工具可以非常容易的创建你的动画，它还支持 gsap。

10、css 动画 101 电子书

地址：
https://cssanimation.rocks/css-animation-101/

11、 css 晚餐

地址：
https://flukeout.github.io/

使用 css diner 练习你的 css 定位技巧。

12、弹性盒模式

地址：
https://www.flexboxpatterns.com/

在这里你可以获得很多使用 flexbox 的技巧和模式。

13、 flexbox froggy

地址：
https://flexboxfroggy.com/

14、 flexbox cheatsheet

地址：
https://darekkay.com/flexbox-cheatsheet/

15、 devinduct flexbox

地址：
https://devinduct.com/workshop/flexbox

16、css – tricks

地址：
https://css-tricks.com/almanac/

17、keyframes

地址：https://keyframes.app/

简单的可视化工具可帮助你为项目生成 css。

类似于视频编辑软件的可视化编辑器，可以用css创建基本或复杂的动画效果。

只需移动一些滑块即可创建单层或多层框阴影。并且可以获取 css 输出。

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

18、css 选择器速查表

地址：
https://frontend30.com/css-selectors-cheatsheet/

此工具旨在快速查询搜索 css 选择器。

19、css 字体栈

地址：
https://www.cssfontstack.com/

从 dan 的工具中获取 web 安全字体等。

20、bennett feely 的 clippy

地址：
https://bennettfeely.com/clippy/

获取你的剪辑路径的工具。

21、codrops css 参考

地址：
https://tympanus.net/codrops/css_reference/

包含所有重要属性和广泛 css 信息参考，可帮助你从基础知识中学习css。

22、css 参考

地址：https://cssreference.io/

这是另一个 css 参考资源。

23、frontend mentor

地址：
https://www.frontendmentor.io/

frontend mentor 有很多基于 html 和 css 的项目，你可以通过实际项目来完成挑战并改进你的风格。

24、代码播放器

地址：
https://thecodeplayer.com/

视频样式演练展示了从头开始创建的很酷的东西。

25、css 数据库

地址：https://cssdb.org/

cssdb 是 css 功能及其在成为已实现的 web 标准过程中的位置的综合列表。

26、边界半径生成器

地址：
https://border-radius.com/

27、css按钮创建器

地址：
https://cssbuttoncreator.com/

28、css 按钮生成器

地址：
https://www.bestcssbuttongenerator.com/

29、samantha ming

地址：
https://www.samanthaming.com/

30、specificity

地址：
https://specificity.keegan.st/

一种理解 css 特异性的直观方式。更改选择器或粘贴您自己的选择器。

31、cleancss

地址：
https://www.cleancss.com/css-minify/

压缩你的 css。

32、100 天 css 挑战

地址：https://100dayscss.com/

33、 csslayout

地址：https://csslayout.io/

使用 css 制作的流行布局和模式的集合。

34、pattern-generator

地址：
https://doodad.dev/pattern-generator/

35、free frontend

地址：
https://freefrontend.com/css-code-examples/

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

36、 glassmorphism css 生成器

地址：
https://hype4.academy/tools/glassmorphism-generator

37、 smol css

地址：https://smolcss.dev/

现代 css 布局和组件的最小片段。

38、 lottie 文件

地址：
https://lottiefiles.com/featured

免费动画。