使用 CSS 创建逼真的艺术作品

用 CSS 实现你想要的精确布局已经够有挑战性了，但你能想象用它来画风景吗？或者重现一副复杂的扑克牌？甚至是创作一幅逼真的肖像？这正是 Ben Evans 使用 CSS 的方式，他创作艺术的方法令人着迷。

我可以写好几页来描述这些作品的细节和美感。我喜欢人们挑战HTML和CSS的极限，所以我们请来了Ben来学习他的技术！

独特的 HTML

当我浏览Ben的代码时，首先映入眼帘的是HTML。他使用了大量的样式，却没有使用任何类或ID。例如，以下是他风景画的前12行代码：

<landscape>
  <sky>
    <x>
      <x></x>
      <x></x>
      <x></x>
    </x>
    <x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      ...

Ben解释说他痴迷于简洁的代码，并且喜欢这些元素的外观<x>。它们是自定义元素，所以无需与默认CSS冲突。为了方便理解，你可以把它们想象成和div元素一样。

如果这些元素没有类，他是如何设置它们的样式的呢？

使用 nth-of-type 进行样式设置

Ben 在 HTML 中创建了一系列元素，然后转到 CSS。在 CSS 中，他无需担心为每个元素命名，因为他使用了nth-of-type选择器。这样，他就不用再为元素命名或修改 HTML 代码了。

你可能会认为这让追踪变得更加困难，但 Ben 会在主要作品旁边留下注释，这使得整理起来更加容易。

Ben 给所有尝试 CSS 插画的人提供了一个很棒的建议：从背景开始，逐步向前，而不是使用 z-index 或 translateZ。Ben 说：“Safari 浏览器尤其容易对伪元素和 z 轴定位感到困惑。”

响应式

这些部件都能响应式设计，这真是太棒了。他是怎么做到的？

html {
  font-size: 1vmin;
}

该vmin单位会根据视口的最小边长做出响应，因此屏幕变小时它也会减小。该rem单位相对于根元素的字体大小。所以如果我们所有单位都基于 rem，它们就都相对于同一个值。真是个好方法！

绘画技巧

本将他用来绘制的元素设置为position: absolute; top: 0; left: 0;离开文档流。然后他使用移动工具将它们移动到合适的位置。他使用各种形状和大小transform: translate3d()来调整元素的形状，并使用调整大小来调整它们的大小。然后，大部分实际的绘图都使用和/或。border-radiustransformremsbackground: linear-gradientbox-shadow

box-shadow它们linear-gradient特别实用，因为它们允许用逗号分隔多个值。让我们看看他是如何运用这种技巧来绘制红心国王的头发的。

红心国王

盒影发

我主要用这个box-shadow元素来给卡牌和其他元素添加柔和的模糊阴影。Ben 在他的作品中把它用在了更有创意的地方！国王的头发实际上是用多层阴影叠加而成的。我们来实际操作一下看看效果。

使用逗号可以在单个元素上添加多个阴影效果。Ben 交替使用蓝色和白色，每次都增加偏移量来拉开间距。在我的版本中，我将它们更改$blue为不同的颜色，以向我们展示它的效果。

获得清晰线条的关键是什么？将第三个属性设置blur-radius为0。

动画片

当鼠标悬停在卡片上时，它会漂亮地旋转和翻转一下。

本采取了一些措施来达到这种显著的效果。

首先，这张牌有点厚度。它其实就是两块背面都是白色的部件，本只是稍微分开了一点。翻转的速度很快，所以我们的眼睛会把中间的白色区域感知为厚度。很棒的魔术！

卡片旋转时，朝下时颜色变暗，朝上时颜色变亮。由于效果非常逼真，你几乎察觉不到这种变化。Ben 在卡片的正面和背面都添加了元素，这些元素会在透明、黑色和白色之间进行动画切换。以下是该效果的代码，其中包含一个简洁的动画简写：

@keyframes light {
  0%,
  100%,
  50% {
    background-color: $none;
  }
  25% {
    background-color: rgba($card, 0.7);
  }
  75% {
    background-color: $body;
  }
}

你可能不相信，但卡片的背面只有一个元素。真是太棒了。

观看此图的延时视频，即可了解整个制作过程。您也可以在 CodePen 上查看红心国王的示例。

伊斯拉

这是我第一次看到本的作品，而且至今它仍然是我最喜欢的。他为使皮肤感觉更加逼真而添加的那些微妙细节简直太棒了。

仔细观察你会发现，鸢尾花是由许多围绕中心点旋转的圆角正方形组成的。本在下一幅作品中也运用了同样的技巧来表现柠檬的中心。

头发的细节刻画堪称完美，这幅作品的亮点就在于此。睫毛、眉毛、面部绒毛和头发都各具特色，使画面更加逼真。本在box-shadow这里运用了比他之前绘制国王头发时更为复杂的技巧。他没有在颜色之间使用白色，而是将缝隙处理成透明，并通过改变颜色来增加层次感。

这是Ben 制作这件作品的延时视频，这是Isla 在 CodePen 上的作品。

水和柠檬

CSS Glass

我原以为这件作品最难的部分是玻璃。所有的折射和高光都完美无瑕，让这块玻璃看起来如此精美！

结果证明我错了。Ben 说：“我从所有的 CSS 艺术创作中学到的最重要的一点是，用 CSS 绘制人造材料比绘制有机材料要容易得多。”

仔细想想，确实很有道理。柠檬的形状和颜色比大多数人造物都要复杂得多。Ben 甚至还提到了我们前端朋友Oscar Salazar 制作的精美玻璃球，作为 CSS 中玻璃效果的优秀范例！

景观

这件作品不仅令人惊艳，而且还巧妙地运用了 SCSS 技巧，让读者可以调整颜色。在 CSS 代码的顶部可以看到：

// v CHANGE THE COLOUR OF THE SUN v //

$sun1: #f2de6f;

妙处在于，通过使用 SCSS 颜色函数，所有其他颜色都基于这一个颜色。Ben 从这个种子颜色出发，调整色调、饱和度、亮度和不透明度，从而创建其余颜色。

例如，我们先设置变量$start，然后aqua使用该adjust-hue函数生成一种新颜色。色相是一个介于 00和 1之间的值360，如下面的色轮所示。我们可以通过将青色的色相增加 1 来生成一种新颜色60deg。

结果更偏向蓝色而不是青色。如果我们使用青色，-60deg则会得到绿色。

Ben 使用此函数和许多其他SCSS/Sass 颜色函数，根据你选择的颜色创建他的调色板。

我们来看一些例子。左边是 Ben 的原始颜色以及基于它衍生出的四种颜色。然后，看看当我将颜色更改$sun1为orange、dodgerblue和 时，结果如何darkgray。

这真是运用 SCSS 颜色函数的好方法！我非常喜欢这个概念，希望看到更多人在作品中使用它。

半色调网点

仔细观察，你会发现水中有类似老式漫画的点状图案。

它们被称为半色调点阵，我之前并不知道只需几行 CSS 代码就能实现。Ben 向我们分享了他的解决方案：

background-image: radial-gradient(blue 30%, #fff 0);
background-size: 1rem 1rem;
background-position: 0 0, 0.5rem 0.5rem;

本在这幅风景画中运用了它们，为水面增添了一些质感。在前一幅作品中，他也用它们来表现柠檬的部分纹理。

点击这里查看延时摄影。

包起来

好了，今天的探索之旅就到此结束了。通过欣赏 Ben Evans 的作品，我们学到了很多。Ben 不使用 ID 或类，而是通过 Sass 来获取下一个要设置样式的元素nth-of-type。我们看到了 Sass 的强大之处box-shadow，以及 Ben 如何运用它来创建重复的形状或纤细飘逸的头发。Ben 通过 Sass 变量实现了场景的自定义，我们也了解了它们的工作原理以及一些示例。

我希望这能启发你尝试一些 CSS 艺术，或者box-shadow在你的下一个网站建设中以新的方式使用它。

非常感谢Ben教我们他的技巧。快去看看他的网站，并在Twitter上关注他吧。