如何通过创建 CSS Art 让你成为更优秀的开发人员

创作 CSS 艺术作品是提升开发者前端编程技能的最佳途径之一。它不仅对初学者有益，而且对经验丰富的开发者来说也是检验自身技能的好方法。CSS 艺术作品的一大优势在于，除了社交媒体和个人项目之外，它并没有被广泛采用。它被视为一个更偏向小众的领域，也只是一种娱乐的好方法。然而，它的意义远不止于此，虽然在商业环境中可能缺乏巨大的实际吸引力，但它确实能让开发者以一种非同寻常的方式展现他们的创造力。

传统思维

典型的前端开发人员需要构建 UI/UX 并设计网站模型。这当然是检验开发人员在现实世界中复制设计能力的好方法，但它并没有给实验、想象力和个人创造力留下太多空间。技术测试总是千篇一律，开发人员必须复制设计。这正是 CSS Art 的闪光点，因为我认为目前还没有公司在做这件事，而且这是一个有趣的挑战，它迫使开发人员突破极限，学习并探索一些很酷的新方法来创作那些通常只能在设计工具中完成的设计。

这种新的思维方式还能帮助你更深入地学习 CSS，并加深你对 Flexbox 和 CSS Grid 等布局模式的理解。一些非常优秀的设计师为社交媒体和 Code Pen 创作了一些令人惊叹的 CSS 艺术作品。特别感谢Twitter 上的@prathkum和 @AprilynneA，他们通过创作 CSS 艺术作品积累了不少粉丝。

将我的电脑桌变成 CSS 艺术

看到这么多人创作 CSS 艺术作品并将其制作成 Twitter 标题后，我决定自己也尝试一下。这感觉就像是每个前端开发者在职业生涯中都应该经历的一项仪式。我拍了一张我的电脑桌的照片，然后尝试用 HTML/CSS 复制它，效果如下图所示。

使用 CSS Art 创建伦敦巴士

我决定创作的下一个 CSS 作品是伦敦巴士。这次我没有尝试复制整幅图，我的目标只是创作出下面这张巴士。

使用 CSS Art 让美国队长的盾牌栩栩如生

这实际上是我创作的第一幅真正的 CSS 艺术作品。它非常简单，但动画效果也很棒。创作这幅作品的灵感来自于我在 Disney+ 上看了几集《猎鹰与冬兵》。

动图

结论

我强烈建议所有前端开发者至少尝试使用 CSS Art 创作一些作品。即使你们认为自己没有任何设计背景，也可以通过尝试来提升设计经验。我对初学者的建议是从简单、小规模的作品开始。不要一开始就尝试创建过于复杂的东西，否则你只会感到沮丧。从简单的设计开始，例如包含许多基本形状（例如正方形和长方形）的作品。然后，你需要做的就是将它们组合成一个作品。想想看，这就像 Photoshop 一样简单。

CSS Art Positives

• 这是学习 CSS 的一种有趣的方式
• 传统网站建设测试的替代方案
• 让你发挥你的创造力
• 为您提供一些独特的东西与社区分享

最后的想法

我真心希望您喜欢这篇文章并从中有所收获。作为一名内容创作者和技术作家，我热衷于分享我的知识，帮助他人实现目标。让我们通过社交媒体建立联系吧！您可以在Linktree上找到我的所有社交媒体个人资料和博客。

和平✌️