推荐 38 个 CSS 在线工具助力你提升工作效率

待我称王封你为后i 2022-09-11 06:24 123阅读 0赞

![e29482d01fce0c4d606789e340fac8b0.png][]

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

翻译 | 杨小二

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

# **1、Layoutit Grid** #

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

![c4255478ac5f52211fd88cfbb0ea74ac.png][]

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

# **2、Sarah Drasner 的 CSS 网格生成器**    #

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

![31d01a11a91a587e9b79a58b0779e6ec.png][]

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

# **3、Grid by Example** #

地址：https://gridbyexample.com/

![16b9b2ca7e5606d74d3b37d7d934d1c5.png][]

# **4、CSS Grid Garden** #

地址：https://cssgridgarden.com/

![75b5e2c94afa44e695ab7a1c090533be.png][]

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

# **5、Mastery Games** #

地址：https://mastery.games/

![d72359891280471fa36ef813d8e4c97d.png][]

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

# **6、Grid Malven** #

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

![27c9a894e737cebf914ab2d23476ebc2.png][]

# **7、CSS Tricks** #

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

![714a0332eb5464171f224a6cb60e98af.png][]

CSS Tricks 的 CSS 网格综合指南。

# **8、三次贝塞尔** #

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

![5353ce1f7770f855ae07a3412060e719.png][]

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

# **9、CSS 动画** #

地址：http://cssanimation.io/

![8c4a1b502af065904fa0dd3eeafa47d1.png][]

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

# **10、CSS 动画 101 电子书** #

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

![db2532d413dd142c798f4f3f4449ce13.png][]

# **11、 CSS 晚餐** #

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

![815a192c4422e1bda0e47cabcac89de8.png][]

使用 CSS Diner 练习你的 CSS 定位技巧。

# **12、弹性盒模式** #

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

![c378b106b559595017c1d4d1fecead64.png][]

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

# **13、 Flexbox Froggy** #

地址：https://flexboxfroggy.com/

![1f1ec50933c66a626f9fee5027616f9c.png][]

# **14、 Flexbox Cheatsheet** #

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

![47b8c7cbdaebdd387c5d07501962077a.png][]

# **15、 Devinduct Flexbox** #

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

![58b25ffc5da72f7c97806c4ad75926c7.png][]

# **16、Css - tricks** #

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

![83a23ae8bb0a030b9d5970b14a374095.png][]

# **17、Keyframes** #

地址：https://keyframes.app/

![bc8dbc763c88a329735c97bfc915573f.png][]

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

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

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

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

# **18、CSS 选择器速查表** #

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

![4416a3921ef5b6ad7d39777998a51193.png][]

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

# **19、CSS 字体栈** #

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

![c385a630ad143947af5ca7a56b80dcee.png][]

从 Dan 的工具中获取 Web 安全字体等。

# **20、Bennett Feely 的 Clippy** #

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

![907fcc2ca77eadfcb1179edaaf1cc057.png][]

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

# **21、Codrops CSS 参考** #

地址：https://tympanus.net/codrops/css\_reference/

![a14401d03adac7397948336f40eb4c4b.png][]

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

# **22、CSS 参考** #

地址：https://cssreference.io/

![5befdb17ed8c689192a0bb8bac667b63.png][]

这是另一个 CSS 参考资源。

# **23、Frontend Mentor** #

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

![0d3ddec6df36fddb02bb895b2b4a53ec.png][]

Frontend Mentor 有很多基于 HTML 和 CSS 的项目，你可以通过实际项目来完成挑战并改进你的风格。

# **24、代码播放器** #

地址：https://thecodeplayer.com/

![dabb1e17e3e05f4ad50d54055f512513.png][]

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

# **25、CSS 数据库** #

地址：https://cssdb.org/

![2dfee6bf9b0bbad260b7c5da3974a7ec.png][]

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

# **26、边界半径生成器** #

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

![82aa93ca6d17951dde2f067e857f2708.png][]

# **27、CSS按钮创建器** #

地址：https://cssbuttoncreator.com/

![0785dd1de1405b0f1d4fc735ad573459.png][]

# **28、CSS 按钮生成器** #

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

![9d9263b0041ade9a652c5e90349aede8.png][]

# **29、Samantha Ming** #

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

![e75694ac61c9286f12a336206e2cabb3.png][]

# **30、Specificity** #

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

![2d08eedbf76d4db7124be12aa0c7575b.png][]

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

# **31、Clean CSS** #

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

![23050b79d5fda2127d3213551a7e8308.png][]

压缩你的 CSS。

# **32、100 天 CSS 挑战** #

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

![b11be7d08bc0f77dc59ffec7c3cf605c.png][]

# **33、 Csslayout** #

地址：https://csslayout.io/

![cccc36ba84f45482926a9b00d983bcb5.png][]

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

# **34、Pattern-Generator** #

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

![6ce3f12ccc8e4ce9759ccc750aa3c105.png][]

# **35、Free Frontend** #

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

![f2994d0c7d887a8c5ce9f054d76067a9.png][]

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

# **36、 Glassmorphism CSS 生成器** #

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

![b310e381f16bfe06b8cbd35dcefb04a6.png][]

# **37、 Smol CSS** #

地址：https://smolcss.dev/

![845ae1905aa25f1f69966d1a2af72f75.png][]

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

# **38、 Lottie 文件** #

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

![36ebc757bad5a0bcedde84b1e1ec7785.png][]

免费动画。

#  #

**学习更多技能**

**请点击下方公众号**

![53c2a8519099ab17c3ae6f952d97819f.gif][]

[e29482d01fce0c4d606789e340fac8b0.png]: /images/20220828/f5a18cf310a840b7936bf44b221b44c5.png
[c4255478ac5f52211fd88cfbb0ea74ac.png]: /images/20220828/42432bbf15404bc2b82a72848405bea2.png
[31d01a11a91a587e9b79a58b0779e6ec.png]: /images/20220828/d3f2c04f2d8c4f0692fac639489c5cdd.png
[16b9b2ca7e5606d74d3b37d7d934d1c5.png]: /images/20220828/b85ca18851314b9b80dde9d6c8f55100.png
[75b5e2c94afa44e695ab7a1c090533be.png]: /images/20220828/7bf09e427d534f17b8ad794867b7a33b.png
[d72359891280471fa36ef813d8e4c97d.png]: /images/20220828/d0a353b8db184fcfb747bf01c8fe24ce.png
[27c9a894e737cebf914ab2d23476ebc2.png]: /images/20220828/ab78ed1d176e445284949111f9757197.png
[714a0332eb5464171f224a6cb60e98af.png]: /images/20220828/98fdffa162784905863f487745412b4b.png
[5353ce1f7770f855ae07a3412060e719.png]: /images/20220828/72a96777daab4daf92fc736ab88359f2.png
[8c4a1b502af065904fa0dd3eeafa47d1.png]: /images/20220828/3f5a7ac3acd3494cb869b385ed809105.png
[db2532d413dd142c798f4f3f4449ce13.png]: /images/20220828/12b9ad1680044f07905b1edee5c874ab.png
[815a192c4422e1bda0e47cabcac89de8.png]: /images/20220828/f77a87c5a04542458e410937085ee33f.png
[c378b106b559595017c1d4d1fecead64.png]: /images/20220828/0521cbd64f304fa1ac5a78e6f8dbcc98.png
[1f1ec50933c66a626f9fee5027616f9c.png]: /images/20220828/f281b46618ff48939db2e0e760094542.png
[47b8c7cbdaebdd387c5d07501962077a.png]: /images/20220828/339ab951d8b04b4a85717674ebcfee09.png
[58b25ffc5da72f7c97806c4ad75926c7.png]: /images/20220828/89ec974284024ee49e9e5e0545781c61.png
[83a23ae8bb0a030b9d5970b14a374095.png]: /images/20220828/f4d51c11bd204036849015de362bd035.png
[bc8dbc763c88a329735c97bfc915573f.png]: /images/20220828/26a055dd0afa4173a68802d64de0c4a6.png
[4416a3921ef5b6ad7d39777998a51193.png]: /images/20220828/7901e67c34544e66b53982dd6784d048.png
[c385a630ad143947af5ca7a56b80dcee.png]: /images/20220828/d3b3096246084f259f74f5e625c7b1d3.png
[907fcc2ca77eadfcb1179edaaf1cc057.png]: /images/20220828/4d51b8d1e0f94b2b80b5257b4853a3ef.png
[a14401d03adac7397948336f40eb4c4b.png]: /images/20220828/e42f69cba51c45178c82f93e58aee35b.png
[5befdb17ed8c689192a0bb8bac667b63.png]: /images/20220828/c3c3da72df4c4f1886370328534ef37a.png
[0d3ddec6df36fddb02bb895b2b4a53ec.png]: /images/20220828/af65d2ade8d64b04bcfa7fb0351b427a.png
[dabb1e17e3e05f4ad50d54055f512513.png]: /images/20220828/74c3e6b023a649928e8943128b7f9ab2.png
[2dfee6bf9b0bbad260b7c5da3974a7ec.png]: /images/20220828/d869251497e641ddb766c300a281a055.png
[82aa93ca6d17951dde2f067e857f2708.png]: /images/20220828/1a083e467920455cb188a9b75d3d6c98.png
[0785dd1de1405b0f1d4fc735ad573459.png]: /images/20220828/065ec0a39e29422eb262cf5a44abc76a.png
[9d9263b0041ade9a652c5e90349aede8.png]: /images/20220828/7552ae7809fd42faaa998864b990d728.png
[e75694ac61c9286f12a336206e2cabb3.png]: /images/20220828/32b51cd55864410db8b63db0d4a51e53.png
[2d08eedbf76d4db7124be12aa0c7575b.png]: /images/20220828/d3b784a640bf471788fc9bb107436ec0.png
[23050b79d5fda2127d3213551a7e8308.png]: /images/20220828/3f04c595341b4f7590abaacdb0f7adeb.png
[b11be7d08bc0f77dc59ffec7c3cf605c.png]: /images/20220828/aebe581b14944c3eb7d2a6e6bbe000ec.png
[cccc36ba84f45482926a9b00d983bcb5.png]: /images/20220828/3e49b5d4387a45f1ad406d543de9cc66.png
[6ce3f12ccc8e4ce9759ccc750aa3c105.png]: /images/20220828/4da5e6929de6428cb86c214805ddd48f.png
[f2994d0c7d887a8c5ce9f054d76067a9.png]: /images/20220828/5a3b4c92cb2d440d859f5c803be6ee22.png
[b310e381f16bfe06b8cbd35dcefb04a6.png]: /images/20220828/10ccccaedb104bee883c467c5fa9e315.png
[845ae1905aa25f1f69966d1a2af72f75.png]: /images/20220828/62ba5df82d2f48aba99a070ca447c2e8.png
[36ebc757bad5a0bcedde84b1e1ec7785.png]: /images/20220828/7ac0b7ac9152453ba670cae22071d35d.png
[53c2a8519099ab17c3ae6f952d97819f.gif]: /images/20220828/13235929954c4ea39852d9a4dac70f04.png