通过创作艺术学习 CSS

本周早些时候，我的一位同事在 CodePen 上发现了Trish Katz 用 CSS 完全绘制的格蕾丝·霍珀海军上将的图片。这简直太神奇了——我为自己的工程项目写过成千上万行 CSS 代码，但这完全是另一个层次！我立刻就想深入了解一下。

单节格蕾丝·霍珀

我完全不懂艺术。我之所以能让我的网站看起来还算过得去，是因为我尽可能地保持网站简洁，并大量运用 Material Design 设计规范。用 CSS 来绘制图形对我来说是一个无法拒绝的挑战！

流程

我开始研究 CSS 艺术，并找到了一些很棒的资源，例如：Sasha Tran、Coding Artist以及Twitter 上的#PureCSS标签。通过这些资源，我最终找到了 Coding Artist 撰写的一篇名为“如何制作纯 CSS 图片以推进以设计为中心的前端开发”的教程。他详细讲解了如何仅使用 CSS 创建一只可爱的考拉卡通形象。

我发现他讲解考拉各个组成部分的方式非常有趣。原来，CSS 艺术是通过填充、调整大小和重塑 div 元素来创建的。div 是一种 HTML 元素，默认情况下没有任何功能——它主要用于对元素进行分组和应用样式。由于它们没有任何默认行为，我们可以轻松地为它们添加样式！考拉身上的每个不同形状都是一个带有 CSS 选择器的 div 元素。我发现这比我之前看到的单个 div 元素的艺术创作要容易得多！

于是，我决定试用一下 Koala CodePen 并进行修改。经过多次尝试，最终我做出了这幅我家狗狗的卡通肖像。再次声明，我真的不是个艺术家。

卡通狗肖像

下面我附上了一些代码片段，展示了部分代码及其功能。以下所有代码也适用于普通的 CSS——CSS 艺术是练习普通 CSS 技能的绝佳途径！例如，下面是狗狗头部的代码：

.head {
    background-color: black; /* the color of the div black */
    position: absolute; /* hard places the div instead of allowing responsiveness or relating it to other divs */
    top: 16.5%; /* where the top of the div will be placed */
    left: 25%; /* where the div will start horizontally */
    width: 50%; /* what percentage of the parent div the div will take up horizontally */
    height: 67%; /* what percentage of the parent div the div will take up vertically*/
    border-radius: 50%; /* makes the div round! */
}

这只是将普通的 CSS 用于艺术创作，而不是网站布局！

我发现最有用的工具之一是Clippy，它允许你绘制 CSS 裁剪路径，并生成你想要绘制的形状的代码！CSS 默认支持圆形和正方形，但当你想使用三角形或其他非标准形状时，就会变得有点棘手。我们需要计算要绘制路径的坐标。由于路径计算很快就会变得相当复杂，所以我很喜欢使用 Clippy 来简化这个过程。

最终项目

有了工作犬之后，我决定要写一些可以在 CodePen 之外使用的东西，所以我创建了一个带有花卉图案的网页。

我一开始用 CodePen 画出了我想加入的各种花朵形状。最后我用了三种：一种是长椭圆形花瓣（白色花朵），一种是水滴形花瓣（粉色花朵），还有一种是由圆形花瓣组成的（黄色花朵）。到那时，我已经相当熟练地使用 CSS 创建和编辑形状了。

后来，我觉得手动绘制所有花朵实在太麻烦了，于是决定用 React 动态生成它们——我算是作弊了！虽然 90% 的工作还是用 CSS 完成的，但我实在受不了那么多 div 元素，所以就用 React 迭代地生成了一些。简单来说，每朵白花都由 21 个 div 组成——20 个花瓣和一个花蕊。我编写了代码来生成这些花瓣及其坐标！

最终项目图片

最终代码在这里，生成的页面部署在这里。我还把它用作了我的桌面背景！

后续步骤

学习 CSS 艺术真的很有趣，我相信从中学习到的概念肯定会让我的日常 CSS 技能更加精湛！虽然我离艺术家还差得很远，但 CSS 艺术或许能成为我未来一个很好的艺术表达途径。总而言之，我非常享受这个项目，也很喜欢最终的成果！

这是我的“学习新事物”系列文章之一！