38个CSS资源升级你的CSS技能

青旅半醒 2022-09-11 03:24 387阅读 0赞

![d249c40f818d0a325e2d4c6ee1322904.png][]

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

翻译 | 杨小二

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

# **1、Layoutit Grid** #

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

![ca29910b679031f2a84f44185bc9c393.png][]

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

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

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

![d04fad4dc47959595dd7b03c585df11d.png][]

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

# **3、Grid by Example** #

地址：https://gridbyexample.com/

![b2eeb0fc389ac52d3972e1a636fc1e5f.png][]

# **4、CSS Grid Garden** #

地址：https://cssgridgarden.com/

![31130ddf58805df5b0d41ac22a25c138.png][]

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

# **5、Mastery Games** #

地址：https://mastery.games/

![4af3aa8a2ab0e70d84714e3c29a22eda.png][]

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

# **6、Grid Malven** #

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

![9d12c0dc54bd2a65048f2dd9f1f0bb6e.png][]

# **7、CSS Tricks** #

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

![c78c1cdff8895484fc85265a75737b11.png][]

CSS Tricks 的 CSS 网格综合指南。

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

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

![66a8c416b6a3baee0d09b44b58d17acf.png][]

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

# **9、CSS 动画** #

地址：http://cssanimation.io/

![ae6e96805ece259411162c83cd795417.png][]

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

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

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

![aa7e97806dd37a7edbcca82f8c425988.png][]

# **11、 CSS 晚餐** #

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

![f8af18870e487dfe3d8018122f717365.png][]

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

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

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

![484f40d6920ccd02aa530eb4b63aca9d.png][]

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

# **13、 Flexbox Froggy** #

地址：https://flexboxfroggy.com/

![4dfaa88078d3f6ecd742b7329fc36bb4.png][]

# **14、 Flexbox Cheatsheet** #

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

![62a8b028b5f10f01b8c22b8f81cc570c.png][]

# **15、 Devinduct Flexbox** #

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

![de69b80802fca5de126b50f506239b3d.png][]

# **16、Css - tricks** #

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

![8613e3ba9d5673463d86a45b711cf6e6.png][]

# **17、Keyframes** #

地址：https://keyframes.app/

![15338d58795dc97187bee2790591905e.png][]

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

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

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

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

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

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

![6d902d74bacf7a6678b7c5cf8e6fc150.png][]

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

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

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

![65b7b22d430f236e0fb1115e088567de.png][]

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

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

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

![84b933e3f810af8af66717b3afa2708d.png][]

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

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

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

![4d5fe1f0e151d72ccf6e682971ff6a76.png][]

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

# **22、CSS 参考** #

地址：https://cssreference.io/

![9e3d30dd64e9d5f3a272b8db8f938e3d.png][]

这是另一个 CSS 参考资源。

# **23、Frontend Mentor** #

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

![8795503b5560386ac8e2e82c1702426c.png][]

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

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

地址：https://thecodeplayer.com/

![794194ea283adef168ae661028ba988a.png][]

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

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

地址：https://cssdb.org/

![ab3f45eaab21f280a8a1f35f2f2bd518.png][]

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

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

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

![48ecb776ab4dba61a268c84af46ffcc3.png][]

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

地址：https://cssbuttoncreator.com/

![b74a81bb32d3dfc960f782ebb671c229.png][]

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

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

![c7b5391d006b007fddbfdb7390a8e23f.png][]

# **29、Samantha Ming** #

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

![c4e75459eb96623c0b155e794656bbef.png][]

# **30、Specificity** #

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

![8d86a73578b5304488de293712832c64.png][]

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

# **31、Clean CSS** #

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

![d95e9b4e8c5e73b2d0147faaa8207e76.png][]

压缩你的 CSS。

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

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

![86c035ec981a260a046d6c53eb3cac4c.png][]

# **33、 Csslayout** #

地址：https://csslayout.io/

![ab7151b5c7d494c58cb93766d1259d0a.png][]

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

# **34、Pattern-Generator** #

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

![77145edd1fb9528b01d5ad860eb2e706.png][]

# **35、Free Frontend** #

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

![194aebd6c2ddc58ae9beb383f8d85fc2.png][]

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

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

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

![d7438866d6484ae5b486e7b861dda0ba.png][]

# **37、 Smol CSS** #

地址：https://smolcss.dev/

![a19a89af6f5c6a44ecec0d0be53486f0.png][]

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

# **38、 Lottie 文件** #

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

![3fdbf5af20c3638e85defc9776d2ee13.png][]

免费动画。

#  #

**学习更多技能**

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

![bf73d6d6304baa53f450b0b1ce5f6981.gif][]

![f8785cdd61e15b59ede9b95e857e625e.png][]

![e1264734e4119f8dab429634349ec6c9.png][]

[d249c40f818d0a325e2d4c6ee1322904.png]: /images/20220828/e9896aa312f24fde9e4e01cc7b3dc04c.png
[ca29910b679031f2a84f44185bc9c393.png]: /images/20220828/1156bc1eab6949ff94cd43e66b946afc.png
[d04fad4dc47959595dd7b03c585df11d.png]: /images/20220828/e681fb4eb4e345c38b15770cb2a0bef6.png
[b2eeb0fc389ac52d3972e1a636fc1e5f.png]: /images/20220828/f88d475324ce43a2a2457c3cbe429e97.png
[31130ddf58805df5b0d41ac22a25c138.png]: /images/20220828/00483e0621554350be10573bd572939d.png
[4af3aa8a2ab0e70d84714e3c29a22eda.png]: /images/20220828/0f9aee81b3f1427ea99a65ddf125c7fa.png
[9d12c0dc54bd2a65048f2dd9f1f0bb6e.png]: /images/20220828/9880b49bb58b49f8b626c57a2c6e269b.png
[c78c1cdff8895484fc85265a75737b11.png]: /images/20220828/2706d141fb4a4bbb8e99978612e3fab2.png
[66a8c416b6a3baee0d09b44b58d17acf.png]: /images/20220828/76099afbd77d49fb9be904279956788d.png
[ae6e96805ece259411162c83cd795417.png]: /images/20220828/6437500ed50a432bb4ed703fd7ff32cd.png
[aa7e97806dd37a7edbcca82f8c425988.png]: /images/20220828/bb637ae731ab456b96fc746d8382a733.png
[f8af18870e487dfe3d8018122f717365.png]: /images/20220828/67c7c581cf1e4c918f9488aa0041279d.png
[484f40d6920ccd02aa530eb4b63aca9d.png]: /images/20220828/0ab3bfb70ebe45d1a9558adcd2ba2378.png
[4dfaa88078d3f6ecd742b7329fc36bb4.png]: /images/20220828/60884375ac624c858b04e43cea1da0d3.png
[62a8b028b5f10f01b8c22b8f81cc570c.png]: /images/20220828/525e49e334a64a3f903870e07467777f.png
[de69b80802fca5de126b50f506239b3d.png]: /images/20220828/3fffcf92fba7411ba3f08bd14568bba6.png
[8613e3ba9d5673463d86a45b711cf6e6.png]: /images/20220828/614126a142b84f03a97187f1981cb117.png
[15338d58795dc97187bee2790591905e.png]: /images/20220828/5fd2bda3dc2c45d4881ec67f0aa7d1a4.png
[6d902d74bacf7a6678b7c5cf8e6fc150.png]: /images/20220828/5d781081ee3d4a59b1722816e1612412.png
[65b7b22d430f236e0fb1115e088567de.png]: /images/20220828/4a1fb903be714fcc8d750cd36162328b.png
[84b933e3f810af8af66717b3afa2708d.png]: /images/20220828/708282eb57f843ba9825fd8bd6d1ac87.png
[4d5fe1f0e151d72ccf6e682971ff6a76.png]: /images/20220828/972bb71091a94eb1ba97322177e39f5e.png
[9e3d30dd64e9d5f3a272b8db8f938e3d.png]: /images/20220828/4fc64b609bfc40029f7f7a16b1d3ceac.png
[8795503b5560386ac8e2e82c1702426c.png]: /images/20220828/e433ebd3ea5b463ea8450e6dcbd3b931.png
[794194ea283adef168ae661028ba988a.png]: /images/20220828/49cf181a3d094c38937a015ac651e565.png
[ab3f45eaab21f280a8a1f35f2f2bd518.png]: /images/20220828/8520f767b1884d7288caa3621a7564af.png
[48ecb776ab4dba61a268c84af46ffcc3.png]: /images/20220828/a6da3141f01442a1a7601557bef85877.png
[b74a81bb32d3dfc960f782ebb671c229.png]: /images/20220828/f3301b3fec3241f9a987af210eec06bc.png
[c7b5391d006b007fddbfdb7390a8e23f.png]: /images/20220828/fab6d92c081f4a1cbbb5e4e8b4a1dfdd.png
[c4e75459eb96623c0b155e794656bbef.png]: /images/20220828/17047854c2f1483d897a3d4c804cb6a4.png
[8d86a73578b5304488de293712832c64.png]: /images/20220828/7ce10794493e448abe5662d4185b87f4.png
[d95e9b4e8c5e73b2d0147faaa8207e76.png]: /images/20220828/b3a9da5f56d842ab84e84662eb214c34.png
[86c035ec981a260a046d6c53eb3cac4c.png]: /images/20220828/6961ba209438446c954de6badcc89f47.png
[ab7151b5c7d494c58cb93766d1259d0a.png]: /images/20220828/c9e17e01347f4649865bd9009bca02fa.png
[77145edd1fb9528b01d5ad860eb2e706.png]: /images/20220828/c401b2501a3d428496100b298570bdf7.png
[194aebd6c2ddc58ae9beb383f8d85fc2.png]: /images/20220828/3472056f3b4a4b6192ec717fcbeadd18.png
[d7438866d6484ae5b486e7b861dda0ba.png]: /images/20220828/1cfc560db2544feca95536a2dfe7171a.png
[a19a89af6f5c6a44ecec0d0be53486f0.png]: /images/20220828/d09c6453ed604516992533257e2e796d.png
[3fdbf5af20c3638e85defc9776d2ee13.png]: /images/20220828/93a1894da0954de78ca8b060c68e3ac6.png
[bf73d6d6304baa53f450b0b1ce5f6981.gif]: /images/20220828/433e07353e8248d38e770b9fe468063b.png
[f8785cdd61e15b59ede9b95e857e625e.png]: /images/20220828/d3fda9362ccb475a89cf01086423b62a.png
[e1264734e4119f8dab429634349ec6c9.png]: /images/20220828/37f358da497347eea802b80d6752119c.png