CSS的生成艺术(2019年)

在中国第五届CSSConf上给出原创视频：css生成艺术@袁川_css conf cn2019年谈话回顾：“css生成艺术”演讲视频出炉。

大家好，我很高兴来到这里。这是我第一次演讲，也可能是我最后一次在中国的CSSConf上演讲，所以这可以说是一个难得的机会。在过去的一年里，我已经编写了很多CSS演示，我大多在周末或只要有空闲时间就这样做。

没过多久，这就成了一种习惯，我开始每天晚上只编码几件事情。如果像幸运的那样，我能够发现一些新的东西，那么我会在今晚剩下的时间里相当开心。今天我想和大家分享一些我在旅途中学到的东西，但是要提醒大家，我认为其中大部分并不实用。

我是一名前端开发人员，主要活跃在Twitter和CodePen上。我还在Github上放了一些小项目。这些都是在网上找到我的链接。

尽管我是一名前台开发人员，但我通常喜欢浏览与设计相关的或更具艺术性的作品，而且我更喜欢关注细节。从这个观察过程中可以学到很多东西，从这些创作如何表达一个概念或想法，到每一笔笔触如何反映创造它们的工具的独特特征。

这是一幅国画，竹子是国画中常见的题材。竹叶是非常难画对的，你可以用很多方法来画它们。根据你观察它们的角度，它们都有不同的形状。

通常，竹叶可以用毛笔一划就能画出来，同时在叶子的不同点上施加不同的压力来画出那个叶片形状的竹叶。要掌握这种控制所需的细微差别，需要很高的技能。

这是中国水墨画中令人惊叹的部分。这取决于刷子的形状和柔软度。用另一个更硬的工具画竹叶不会给你带来同样的效果。

我遇到的另一种有趣的艺术类型是沙画。沙画依赖于沙子本身的质地，以及它们与光和影的相互作用。用沙子划一条直线不是一件容易的事。这是一种不同的表现形式。

我们现在在CSS中有许多技术，这些技术源于处理跨浏览器支持的问题，或者试图实现某些复杂的设计。尽管处理这样的问题很痛苦，但如果你设法找到解决方案，那就相当令人兴奋了。

CSS可能不如Canvas或SVG灵活，有时也可能性能较差，但这是因为CSS不是用来绘图的。然而，很多人使用CSS来创作艺术，包括我自己，纯粹是为了好玩。

为了用CSS创作艺术，有必要了解CSS的局限性和它能做什么。更重要的是，你必须接受它的局限性和弱点。

我们先来看一下线条，因为它是绘画的基本元素。我们可以通过多种方式使用CSS来绘制一条线。但是在CSS中实际上没有线的概念，我们只是用其他元素或属性来创建线的错觉。

您可以设置元素的高度和宽度，然后为其指定背景色，使其看起来像一条线。

我想提到的一件事是在伪元素上使用文本修饰的可能性。您不需要文本内容，只需要一些下划线来控制行的长度，粗细可以由字体大小控制。

此技术的一个优点是，通过将文本装饰样式设置为虚线，您可以轻松地绘制虚线。

说到虚线，需要考虑的一种有趣的技术是强调文本，因为我们可以自由地决定使用什么字符，例如点或破折号。然后可以使用字母间距来控制间隙大小。

使用线性渐变()也是一种选择，因为您可以利用Background-Repeat属性。

它有一个内置的虚线属性，是我介绍的所有技术中功能最多的。

但有一个问题是，Chrome在小像素大小下不能很好地渲染它们，只是需要注意一些东西。

如果你不介意麻烦的话，你也可以使用多个渐变来达到同样的效果。

接下来来看另一个基本元素，那就是圆圈。网络都是方框，所以在CSS中也没有真正的圆的概念。

画一个圆需要一个等宽等高的元素，加上50%的边界半径。

通过为4个角的每个角设置不同的值，可以使该斑点形状。

也可以使用径向渐变()绘制圆，但它的限制是圆的边缘不会那么平滑。

我认为CLIP-PATH是最好的选择，因为它确实有一个内置的Circle()函数。不过，如果您使用剪辑路径，那么您将不能使用方框阴影或任何边框。

剪辑路径使得绘制半圆或椭圆变得很容易，这也是我最喜欢CSS的地方，我们可以使用多种技术来达到同样的效果。

最早的纯CSS三角形是在没有高度和宽度的元素上绘制的，并通过操作它们的边框值来实现不同的三角形形状。我认为想出这项技术的人真的很聪明。我很早就从雅虎的一篇博客文章中第一次看到了这一点。

但是裁剪路径是所有实现中最直接的实现，因为除了平面上的3个点之外，还有什么是三角形呢？你只需要画出这3个点来创建你选择的三角形。

Unicode还提供了大量的形状，我们可以通过CSS中的伪元素来使用它们。

对于多边形来说，事情就不那么简单了。这些大多需要使用剪辑路径。

让我们更深入地看看这里发生了什么。如果我们考虑一个典型的笛卡尔平面，它由无限多个离散的x，y坐标对组成，这就是裁剪路径中的polygon()函数用来创建不同形状的原因。在这里，我们可以利用一些三角函数来帮助我们解决问题。

在这一点上，我们将需要使用Javascript，我认为这完全可以。使用Javascript帮助我们动态生成所需的值是一种比手动计算好得多的方法。

这里我们有3个点，对于这个用例，我们只考虑规则多边形，并且我们利用这3个点将圆周划分为3个部分。然后利用正弦和余弦的三角函数来计算所需的坐标，并将它们重新插入到函数中。

这是3分、4分、5分、6分等等的样子。这些形状都是用裁剪路径生成的。

它是由一组参数方程组成的，我发现这些曲线与剪辑路径配合得很好。

函数的作用是：可以接受一个可选的填充规则参数。它的默认值是非零值，但我们可以将其更改为EVEN ODD值，当应用于此星形时，它将像这样剪裁相交部分。

我们可以利用这种行为来产生各种不同的形状。当我第一次意识到这是可能的时，我对结果感到非常震惊。其中一些形状在我看来很像海底生物，甚至是来自外太空的生物。这些只是三角函数可能实现的功能的一个小样本。

我们可以使用的另一种技术是将box-dow属性与边框半径一起设置为inset。在这里，我们有一个新月形状的月亮。

但是如果我使用不同高度和宽度的元素，以及不同的边界半径值和方框阴影，我们最终会得到类似画笔笔触的形状。可以组合多个画笔笔触形状以达到所需的效果。

现在，我们已经介绍了使用CSS创建不同形状的多种技术。但是我们怎样才能使用这些形状呢？最简单的方法是将它们渲染为表面上的瓷砖。

我们也可以使用CSS网格来布置形状。网格是一种二维布局系统。我们在这里试图实现的是组合相关的形状以形成新的形状。

CSS本质上与DOM捆绑在一起，因此我们确实需要将元素的数量与我们想要的网格大小相匹配。

例如，如果我想要一个5x5的网格，我需要25个元素，然后用CSS网格对它们进行布局。

在这里，我从一条简单的规则开始。这里有两条直线，顺时针和逆时针方向旋转45度。我的规则是随机选择这些行中的一行并将它们放入网格中。

即使这是一个简单的规则，因为相邻的线可能会连接在一起，我们最终会产生迷宫效应。这是一种存在已久的模式。我们还使用CSS来旋转线条。

我的另一条规则是四分之一圈。同样，我从这4个四分之一圆中随机选择一个，并将它们放入网格中。现在，当相邻的形状组合在一起时，我们可以得到各种有趣的图案。在这里，我使用边界半径来绘制这些四分之一圆，但是您也可以使用裁剪路径或径向渐变()来绘制这些形状。

现在下一个问题是，我们如何动态生成这样的模式。因为CSS不具备这样做所需的逻辑。我可以利用骰子的概念，如果结果是1，我使用一组特定的值，如果结果是2，则显示一组不同的值，依此类推。

但是我们也可以利用Javascript，我认为Javascript是不可避免的。

所以我想谈谈CSS-涂鸦。这是我两年前写的一个工具，用来解决这个问题，以便利用一些随机函数和其他有用的东西来生成这些模式。

如果我使用CSS-Doodle来生成和绘制这些形状，我可以动态修改这些值来创建不同比例的图案，这现在是一个8x8网格。

CSS非常依赖于HTML，这个工具允许我只关注CSS。此模式的规则并不太复杂，并且此代码会生成一些CSS。@rand()函数的范围是500ms，如果我将值更改为5000ms，范围将相应地从1ms更新到5000ms。

@Pick()将从该矩阵中随机选取一个值。这是从Logo编程语言中获得的灵感，不知道你们中有没有人在过去玩过它，因为它也有拾取功能。

更有趣的网格属性之一是GRID-AUTO-FLOW。其中一位发言者在前面提到了这一点，它可以做的是，如果您有一些高度和宽度不同的网格项，此属性可以在可能的情况下安排网格项来填充任何空白空间。因此我们得到了这样的效果。

此时，我们可以通过向每个网格项目添加一个伪元素来向网格添加更多元素。我们可以用不同的背景颜色来修饰这些伪元素，并给它们提供从10%到90%的大小范围。

哦，我刚才忘了说点事，让我们回到这张幻灯片上。这是CSS网格中的内容，但我不确定你们中是否有人有使用GLSL(OpenGL着色语言)或一般着色器的经验。如果你有，这可能会让你更熟悉。

这些样式被映射到每个网格单元上，就像着色器映射到每个像素一样[❓18.32]，这是一个相似的概念，但性能可能不是很好。

回到这里，假设我有一个像这样的伪元素，我会将这些样式应用到每个网格项目上，以获得我们在这里看到的效果。这里的这个模式恰到好处的复杂。利用CSS网格中的属性，效果相当漂亮。

现在，我们来看一下Properties。网格是生成图案的一种非常基本的技术。你可以随机地把东西放入网格中，然后发现各种独特的模式。这是一种非常方便的技术。

例如，使用变换旋转它们。基本上，我在这里所做的就是旋转和放大上一张幻灯片中的图案。

或者把边框颜色改成红色和紫色，现在看起来有点难看。

因为颜色太亮，我们可以修改不透明度值，只需随机修改即可。

我们还可以随机修改@GRID函数上的值。现在我们还可以使用GAP属性，让模式有更多的喘息空间。

这个设计还有很多需要改进的地方。这些行排列得太整齐了，让我们通过一些转换使它们更多样化一些。

@row()会将每个现有行的值传递给每个网格单元格，如果我们这样做，就会得到倾斜的效果。

这会导致行与行之间出现间隙，所以我可以使用@sin函数，增加这里的值，以使情况变得均匀，这会给我们带来更好的结果。

我们在这里看到的效果是上边界和左边界的一些随机值的结果。这里的这个图案有点像古代住宅中的窗户图案。

让我们在这里使用虚线的值。我的这个键盘有问题，有时会重复击键。

此模式使用边框样式：虚线。我们可以在这里增加大小值，我们实际上是将点放在一个圆形路径上。

尽管我只使用了30个div，但看起来我生成的圆圈要多得多。

现在，让我们来看一下边界图像。我发现这处房产较少使用。我去年才开始玩弄它。当然，我还没有真正深入研究它。

让我们在这里更改一些值。将旋转增加到10度会使效果更厚。

只要改变周围的价值观，这取决于你，真的。我们最终得到了相当不错的结果。

或者，我们也可以使用边界图像的其他可能值。这里我组合了许多不同的值，正如你所看到的，所有结果图案都是对称的。

然后是渐变。我真的很喜欢CSS中的渐变。因为CSS只允许我们2个伪元素，所以没有办法生成更多。

但是对于渐变，因为您可以使用的数量没有限制，所以我们可以使用它们在设计中生成更多的“元素”。

这是一个相当简单的设计。在这个单独的div上，我们可以使用线性渐变()生成100行。

或者可能是圆形，带有径向渐变()。即使我只有1个div，我也可以生成无限的渐变来弥补这一不足。

因为我们可以用渐变绘制许多不同的形状，所以我们可以将它们全部应用到单个div，并最终得到非常有趣的结果。

我喜欢的另一种模式使用了混合混合模式。这里我每个div使用500个渐变。如果有20个div，就有10000个渐变。

这段代码的最终结果给人一种科幻的感觉。我不是很确定这个设计的构成部分，但只是玩弄各种功能中的不同值似乎会产生非常令人愉快的结果。

这里我们有一个单一的渐变。让我们在混合中添加更多的渐变。并应用背景混合模式属性。这在使用多个渐变时非常有用。渐变会混合在一起，但是很难控制颜色。

如果我们进一步增加渐变的数量，这就是最终结果。但是颜色真的很难控制。那我们就只能做实验了。

这个现在的设计是红色的，但是如果我们把值改成11，颜色就大不一样了。

我们也可以改变线性渐变的角度，给它一个-60度到60度的范围。只是颜色太难处理了。

因为颜色是问题，我会使用色调旋转滤镜进行调整，因为颜色不是很好。

没有滤镜，它是红色和蓝色的，但有滤镜的话看起来稍微好一点。此效果是使用多个圆锥渐变实现的。

我们可以对函数值进行更多更改，最终得到完全不同的效果。我个人只是喜欢它看起来的样子。我们可以使用渐变实现更多的效果。

该图案由分别通过线性渐变()和径向渐变()生成的线和点的组合组成。

你也可以达到这样的效果。这里的线条由多个线性渐变组成，形状是用裁剪路径创建的。

长方体阴影和渐变的相似之处在于，可以使用它们生成的形状数量没有限制。有些人利用方框阴影来创作像素艺术。

而且不涉及太多代码。它是众多长方体阴影的顶峰，我们可以尝试添加更多的长方体阴影。我们还可以修改box-dow属性中的值来调整形状的位置。

另一个我很喜欢的效果是使用带滤镜的长方体阴影。这里涉及的代码不多。我在这个元素上创建了100个长方体阴影，并应用了滤镜效果。

当我们改变对比度的值时，效果开始相应地变形和改变。使用值5似乎可以创建最令人满意的最终结果。

只是我们会将此属性用于文本。因为我们使用的是文本，所以我们还可以选择使用Unicode符号。

我们可以将不同的颜色和大小应用到文本阴影中，然后像这样将它们组合在一起。

现在，这个效果完全是用点做的。这些点的分布和分布都是不同的，当结合在一起时，我们就会得到这样的设计。

这种轻柔的效果是用括号做成的。掌声谢谢大家。你也可以尝试其他的符号。

如果您对括号的形状不满意，可以使用变换对其进行修改。它们最初看起来是这样的，但我们可以应用旋转和倾斜来得到这样的形状。

这就是我做这个特别设计的原因。用途我想这看起来有点像一些水生植物。它由前面创建的斜括号和一些圆点组成。

我们也有文字装饰品。它确实类似于边界地产，因为它也有点和破折号。

最后，我们有一些曲线可以使用，所以让我们看看如何利用它。现在，我只需要将值设置为Wavy，我们可以通过更改内容的值来调整行的长度。

我实际上隐藏了实际的文本内容，这是一条直线，并显示了波浪形的文本装饰。

我们还可以添加透视值，您还看不到任何不同之处。

但是一旦我们应用了旋转变换，我们就会得到类似这样的结果。不同的透视价值会给我们带来非常不同的最终结果。

现在，因为它是文本内容，您可以尝试其他Unicode字符，如x或o或任何其他字符，以增加效果。

我们还可以将整个过程制作成动画。掌声此动画涉及将透视值设置为介于50px和[❓31.52]之间的动画。

过滤器是我正在试验的最新产品。我经常使用SVG过滤器，因为它们与CSS一起工作得非常好。尽管您可能认为这不是CSS，但我认为这无关紧要，因为我可以用它创建很多东西。

这是我最常使用的滤镜。这是相当常见的，并且涉及添加噪波作为纹理。

这是一个圆锥梯度。一旦我们加入这个过滤器，渐变就会发生变化。这些参数值真的很吸引人，我们只需要稍微调整一下就可以得到一些壮观的效果。你也可以自己玩它们。

我们还可以将种子值随机化，每次都会产生不同的效果。

这是通过将径向渐变添加到上一个混合而实现的效果。看起来挺漂亮的。

通过进一步调整过滤器上的参数值，我们得到了类似这样的结果。我前段时间研究过这个，然后我。

.