英文 | https://hulyakarakaya.medium.com/level-up-your-css-with-these-38-resources-c0de7ecd8714
翻译 | 杨小二
大家好&＃xff0c;今天我将向你分享38个可以用来创建漂亮样式的 CSS 工具。
1、Layoutit Grid地址&＃xff1a;https://grid.layoutit.com/
Layoutit grid 是一个 CSS Grid 布局生成器。使用干净的编辑器可以快速绘制网页布局&＃xff0c;并获取HTML和CSS代码以快速启动你的下一个项目。你也可以在 CodePen上看到代码&＃xff01;
2、Sarah Drasner 的 CSS 网格生成器地址&＃xff1a;https://cssgrid-generator.netlify.app/
该站点收集了示例、视频和其他信息&＃xff0c;可帮助你学习 CSS 网格布局。由Rachel Andrew开发和维护。
3、Grid by Example地址&＃xff1a;https://gridbyexample.com/
4、CSS Grid Garden地址&＃xff1a;https://cssgridgarden.com/
在学习 CSS Grid 的同时种植您的胡萝卜园。
5、Mastery Games地址&＃xff1a;https://mastery.games/
在这里&＃xff0c;你可以奠定周围的僵尸和实践Flexbox的; 在学习 CSS 网格的同时拯救一个可爱的外星物种。
6、Grid Malven地址&＃xff1a;https://grid.malven.co/
7、CSS Tricks地址&＃xff1a;https://css-tricks.com/snippets/css/complete-guide-grid/
CSS Tricks 的 CSS 网格综合指南。
8、三次贝塞尔地址&＃xff1a;https://cubic-bezier.com/#.17,.67,.83,.67
使用此工具可以快速生成预览三次贝塞尔曲线。
9、CSS 动画地址&＃xff1a;http://cssanimation.io/
使用这个工具可以非常容易的创建你的动画&＃xff0c;它还支持 GSAP。
10、CSS 动画 101 电子书地址&＃xff1a;https://cssanimation.rocks/css-animation-101/
11、 CSS 晚餐地址&＃xff1a;https://flukeout.github.io/
使用 CSS Diner 练习你的 CSS 定位技巧。
12、弹性盒模式地址&＃xff1a;https://www.flexboxpatterns.com/
在这里你可以获得很多使用 Flexbox 的技巧和模式。
13、 Flexbox Froggy地址&＃xff1a;https://flexboxfroggy.com/
14、 Flexbox Cheatsheet地址&＃xff1a;https://darekkay.com/flexbox-cheatsheet/
15、 Devinduct Flexbox地址&＃xff1a;https://devinduct.com/workshop/flexbox
16、Css - tricks地址&＃xff1a;https://css-tricks.com/almanac/
17、Keyframes地址&＃xff1a;https://keyframes.app/
简单的可视化工具可帮助你为项目生成 CSS。
类似于视频编辑软件的可视化编辑器&＃xff0c;可以用CSS创建基本或复杂的动画效果。
只需移动一些滑块即可创建单层或多层框阴影。并且可以获取 CSS 输出。
选择你喜欢的颜色&＃xff0c;在十六进制和 RGB 之间转换&＃xff0c;并创建和保存调色板。
18、CSS 选择器速查表地址&＃xff1a;https://frontend30.com/css-selectors-cheatsheet/
此工具旨在快速查询搜索 CSS 选择器。
19、CSS 字体栈地址&＃xff1a;https://www.cssfontstack.com/
从 Dan 的工具中获取 Web 安全字体等。
20、Bennett Feely 的 Clippy地址&＃xff1a;https://bennettfeely.com/clippy/
获取你的剪辑路径的工具。
21、Codrops CSS 参考地址&＃xff1a;https://tympanus.net/codrops/css_reference/
包含所有重要属性和广泛 CSS 信息参考&＃xff0c;可帮助你从基础知识中学习CSS。
22、CSS 参考地址&＃xff1a;https://cssreference.io/
这是另一个 CSS 参考资源。
23、Frontend Mentor地址&＃xff1a;https://www.frontendmentor.io/
Frontend Mentor 有很多基于 HTML 和 CSS 的项目&＃xff0c;你可以通过实际项目来完成挑战并改进你的风格。
24、代码播放器地址&＃xff1a;https://thecodeplayer.com/
视频样式演练展示了从头开始创建的很酷的东西。
25、CSS 数据库地址&＃xff1a;https://cssdb.org/
cssdb 是 CSS 功能及其在成为已实现的 Web 标准过程中的位置的综合列表。
26、边界半径生成器地址&＃xff1a;https://border-radius.com/
27、CSS按钮创建器地址&＃xff1a;https://cssbuttoncreator.com/
28、CSS 按钮生成器地址&＃xff1a;https://www.bestcssbuttongenerator.com/
29、Samantha Ming地址&＃xff1a;https://www.samanthaming.com/
30、Specificity地址&＃xff1a;https://specificity.keegan.st/
一种理解 CSS 特异性的直观方式。更改选择器或粘贴您自己的选择器。
31、Clean CSS地址&＃xff1a;https://www.cleancss.com/css-minify/
压缩你的 CSS。
32、100 天 CSS 挑战地址&＃xff1a;https://100dayscss.com/
33、 Csslayout地址&＃xff1a;https://csslayout.io/
使用 CSS 制作的流行布局和模式的集合。
34、Pattern-Generator地址&＃xff1a;https://doodad.dev/pattern-generator/
35、Free Frontend地址&＃xff1a;https://freefrontend.com/css-code-examples/
来自codepen.io和其他资源的免费 CSS 代码示例。
36、 Glassmorphism CSS 生成器地址&＃xff1a;https://hype4.academy/tools/glassmorphism-generator
37、 Smol CSS地址&＃xff1a;https://smolcss.dev/
现代 CSS 布局和组件的最小片段。
38、 Lottie 文件地址&＃xff1a;https://lottiefiles.com/featured
免费动画。
学习更多技能
请点击下方公众号
京公网安备 11010802041100号