个性化阅读
专注于IT技术分析

用这50多个资源来升级你的CSS

大家好,今天我将分享CSS工具和CSS资源,你可以用它来创建漂亮的样式。

50多个CSS资源和工具

1. Layoutit Grid

Layoutit grid是一个CSS网格布局生成器。快速绘制网页布局与我们干净的编辑器,并获得HTML和CSS代码,以快速启动你的下一个项目。此外,你可以在CodePen上看到代码!

CSS资源:Layoutit grid

2. CSS Grid Generator

CSS资源:CSS Grid Generator

3. 网格例子

这个网站是一个例子,视频和其他信息的集合,以帮助你学习CSS网格布局。由Rachel Andrew开发和维护。

CSS资源:网格布局的例子

4. CSS Grid Garden

在学习CSS网格的同时种植你的胡萝卜花园。

CSS资源:CSS Grid Garden

5. Mastery Games

在这里你可以玩Zombies游戏和练习flex,在学习CSS网格的同时拯救一个可爱的外星物种。

CSS资源:Mastery Games

6. Grid Malven

网格备忘单。

CSS资源:Grid Malven

7. CSS Tricks – 一个完整的指南网格

全面的指南,以及CSS网格布局的技巧。

CSS资源:CSS Tricks

8. Cubic Bezier

用这个工具快速生成和预览一个三次bezier。

CSS资源:Cubic Bezier

9. CSS Animation

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

CSS资源:CSS Animation

10. CSS动画电子书: CSS Animation 101 E-book

CSS资源:CSS动画电子书: CSS Animation 101 E-book

11. CSS Diner

练习你的CSS定位技能与CSS晚餐。

CSS资源:CSS Diner

12. Flexbox Patterns

在这里,你可以在使用flex时获得很多技巧和模式。

CSS资源:Flexbox Patterns

13. Flexbox Froggy

CSS资源:Flexbox Froggy

14. Flexbox Cheatsheet

CSS资源:Flexbox Cheatsheet

15. Devinduct Flexbox

预览并查看flex的代码。

CSS资源:Devinduct Flexbox

16. Flexbox Defense

你的任务是阻止敌人通过你的防御。不像其他塔防游戏,你必须用CSS定位你的塔!

CSS资源:Flexbox Defense

17. CSS Tricks Almanac

CSS资源:CSS Tricks Almanac

18. Keyframes

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

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

通过移动一些滑块创建单个或多层的盒子阴影。立即获得CSS输出。

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

CSS资源:Keyframes

19. CSS Selectors Cheatsheet

这个备忘单是为快速搜索CSS选择器而设计的。

CSS资源:CSS Selectors Cheatsheet

20. CSS Font Stack

从丹的工具得到网络安全字体和更多。

CSS资源:CSS Font Stack

21. Clippy

找到你的clip-paths,也可以到班尼特·菲利(Bennett Feely)的网站查看他所有的工具。

CSS资源:Clippy

22. Codrops CSS Reference

一个广泛的CSS参考与所有重要的属性和信息从基础学习CSS。

CSS资源:Codrops CSS Reference

23. CSS Reference

另一个CSS参考资源。

CSS资源:CSS Reference

24. Frontend Mentor

Frontend Mentor有很多基于HTML和CSS的项目,你可以通过在现实项目中工作来完成挑战和改进你的风格。

CSS资源: Frontend Mentor

25. The Code Player

视频风格的攻略显示酷的东西是从零开始创建。

CSS资源:The Code Player

26. CSS DB

css db是一个全面的CSS特性列表,以及它们在实现web标准过程中的位置。

CSS资源:CSS DB

27. Border Radius Generator

CSS工具:Border Radius Generator

28. Button Creator

CSS工具:Button Creator

29. Best CSS Button Generator

CSS工具:Best CSS Button Generator

30. Samantha Ming’s Tidbits

CSS工具:Samantha Ming's Tidbits

31. Specificity Calculator

一种直观的方式来理解CSS的特殊性。更改选择器或将它们粘贴到你自己的选择器中。

CSS工具:Specificity Calculator

32. Clean CSS

压缩CSS。

CSS工具:Clean CSS

33. 100 Days CSS Challenge

CSS工具:100 Days CSS Challenge

34. CSS Layout

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

CSS工具:CSS Layout

35. Pattern Generator

CSS工具:Pattern Generator

36.Paaatterns

CSS工具:Paaatterns

37. Pattern Pad

创造无限独特的设计模式。

CSS工具:Pattern Pad

38. Pattern CSS

CSS唯一的库,填补你的空背景与美丽的图案。

CSS工具:Pattern CSS

39. Free Frontend

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

CSS工具:Free Frontend

40. Glassmorphism CSS Generator

CSS工具:Glassmorphism CSS Generator

41. Smol CSS

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

CSS工具:Smol CSS

42. Lottie Files

免费的动画。

CSS工具:Lottie Files

43. Animating Underlines

Michelle Barker分享了一些关于下划线样式和动画的奇妙技巧。

CSS工具:Animating Underlines

44. Free Fonts by FontShare

使用过谷歌字体的人都会熟悉这项名为Fontshare的服务。浏览字体列表,选择你想要的样式,并将它们添加到你的网站。

CSS工具:Free Fonts by FontShare

45.BG Jar

免费的SVG背景生成器为你的网站,博客,和应用程序。

CSS工具:BG Jar

46. Get Waves

一个免费的SVG波发生器,使独特的SVG波。

CSS工具:Get Waves

47. Custom SVG Shape Dividers

我们创建这个免费工具是为了让设计人员和开发人员更容易导出漂亮的SVG

为他们最新的项目形状分隔。我们希望你喜欢这个工具。

CSS工具: Custom SVG Shape Dividers

48. CSS Zen Garden

一个通过基于css的设计可以完成的演示。从列表中选择任何样式表将其加载到此页中。

CSS工具:CSS Zen Garden

49. CSS Minifier

在线CSS缩小镜/压缩机。免费的!提供了一个API。简单快捷又快速。

CSS工具:CSS Minifier

50. CSS Cheatsheet

元素、选择器和样式的列表,以及到它们的MDN页面的相关链接。

CSS工具:CSS Cheatsheet

51.Autoprefixer

Autoprefixer在线- web repl为原始Autoprefixer。它解析你的CSS,并使用Can I Use中的值将供应商前缀添加到CSS规则中。谷歌推荐,Twitter和淘宝使用。

CSS工具:Autoprefixer

52. Should I Prefix

这个页面有一个目的:简单地显示一个新的CSS属性需要什么前缀。

CSS工具:Should I Prefix

53. Design Resources for Developers

从股票照片,web模板,CSS框架,UI库,工具,和更多的设计和UI资源的策划列表。

CSS工具: Design Resources for Developers

54. Bem Methodology

BEM代表“块,元素,修饰符”,这是CSS中的命名约定。更多信息请访问官方网站。

CSS工具:Bem Methodology

55. CSS Cheatsheet

CSS工具:CSS Cheatsheet

结束

以上就是所有的CSS资源和工具了,如果你喜欢这篇文章,在你的社交平台上分享它,支持我写更多的东西,也可以分享到其它更多网站中。

赞(0) 打赏
未经允许不得转载:srcmini » 用这50多个资源来升级你的CSS
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏