50 天 CSS 艺术课程的 5 个教训

50天前，我开始了“苏格兰百日计划” ——连续100天，每天创作一件CSS艺术作品。我在这里写下了我的动机：

和我一起体验 100 天纯 CSS

Suzanne Aitchison ・ 2020 年 5 月 16 日 ・ 阅读时长 2 分钟

#css #html #webdev #codepen

在这个项目之前，我从未真正接触过任何 CSS 艺术创作，到目前为止，这段旅程充满乐趣！今天是学习进度的一半，我想分享一下我目前学到的知识。

我迄今为止学到的五大知识

1. 简单往往最有效

在过去的 50 天里，我在每个创作上花费了不同程度的时间和精力，有时我真的沉迷于复杂的形状、动画等等。

不过——我迄今为止最受欢迎的一些作品其实都是最简单的。比如这只羊，它基本上是由两种颜色和很多圆圈组成的！

因此，我对刚开始使用 CSS 艺术的任何人来说的建议是专注于使用一些基本形状制作的图片，并尽可能保持调色板最少，因为它可以帮助图像看起来更引人注目。

2. Clip-path 非常非常有用

在开始这个项目之前，我从未需要使用 CSS 属性clip-path。我甚至不确定我是否听说过它！

Clip-path 允许你定义一个形状，该形状将决定 HTML 元素的哪些部分将被显示。你可以用它来创建各种不同的形状！查看MDN 的 clip-path 网页文档。

更棒的是， Clippy是一款很棒的工具，可以在便捷的用户界面中创建这些形状。过去 50 天里，我经常使用这个工具 😄

例如，我用它来创建一些随机的叶子形状，供切叶蚁携带：

3. 渐变可以节省时间（也可以节省 div）

我经常发现我需要的是条纹，或者几个相邻的不同颜色的色块。直到开始这个项目之前，我才真正意识到 CSS 渐变在这方面能带来多大的帮助，尤其是它能够在渐变中添加固定的色块来创建硬条纹，而不是颜色从一种颜色逐渐过渡到另一种颜色。

例如，我使用了linear-gradient一些非常柔和的分级来为这只鹦鹉创建尾巴和翅膀条纹：

然后repeating-linear-gradient在冰淇淋蛋筒上以相反的方向重复一束条纹：

4. CSS 变量具有作用域，非常有用

我以前使用过CSS 变量，并立即在这个项目中使用它们，因为它使生活变得更加轻松，例如能够在一个地方编辑所有颜色，定义/使用如下：

:root {
  --ice-cream-color: #FCB8C3;
  --ripple-color: #FC889B;
  --cone-color: #F7C077;
  --waffle-color: #F3A63A;
}

.scoop {
  background: var(--ice-cream-color);
}

我通常在图片的几个地方使用相同的颜色，能够在一个地方更改它真是一个巨大的好处🙏

不过，我之前从未真正使用过 CSS 变量，那就是以作用域的方式使用它们。与其像:root上面那样声明变量值，不如在 CSS 特定选择器中声明它们，它们会在该作用域内应用。

例如，在这个齿轮动画中，三个齿轮共享一个类，该类定义了它们的大部分外观和行为。为了使它们的大小和颜色略有不同，我使用了作用域 CSS 变量，例如

.cog-one {
  --cog-color: #898888;
  --cog-outer-size: 50px;
}

.cog-two {
  --cog-color: #A16036;
  --cog-outer-size: 40px;
}

.cog {
  border: var(--cog-outer-size) solid var(--cog-color);
}

5.灵感可以来自平凡的事物

挑战很大一部分，尤其是在最初阶段，在于思考到底要做什么。它必须足够简单，以便我能够在合理的时间内完成，同时也要足够有趣，让人享受，并希望能够吸引眼球。

事实证明，一些最无聊的东西却是编写和分享起来最有趣的😄到目前为止，我的创作包括一些非常平庸的东西，比如我的洗衣机、一杯茶、一杯咖啡和一个烤面包机：

想加入我吗？

我期待着项目的后半部分，如果您有兴趣尝试一些 CSS 艺术，我也很乐意关注您！

您可以在我的 CodePen 个人资料或Twitter上与我联系并关注我的创作。

我发现 CodePen 和 DEV 一样，是一个非常乐于助人的社区，我在那里得到了很多鼓励和动力。希望如果你也决定尝试一下，也能感受到同样的收获！

希望在那里见到你，现在我将向你展示我第 50 天的创作——一些庆祝气球👋🎉🎈