CSS 艺术创作简介

第一次看到用 CSS 创作的艺术作品时，我惊呆了。我经常在创建基本布局时被 CSS 搞得焦头烂额，而这里竟然有人能把 CSS 运用到这种程度！

这似乎远远超出了我的技能水平，我很乐意潜伏在那里欣赏别人的精彩作品。然而，不久前，我决定尝试一下（锁定效果！）。我在网上查找了相关资源和教程，然后尝试了我自己原创的——一个简单的熊猫！

在理解了底层原理之后，我深入研究了具体的 CSS 概念，力求精通。通过实践，我尝试了越来越复杂的项目。我甚至受 Lynn Fischer 的asinglediv项目启发，创建了一个单 div CSS 书架。

虽然我并非 CSS 艺术方面的专家（我希望通过练习不断进步），但我希望记录我的学习和创作过程，希望对其他人有所帮助。本系列将分为两部分，分别介绍

1. 行业工具和
2. 一步一步的演示。

为什么要尝试 CSS Art？

虽然我同意 CSS 艺术似乎没有太多实际用途——SVG 或图像才是大多数网站/应用的实用方法。然而，CSS 艺术是一种提升 CSS 水平的有趣方式。就我而言，它最终帮助我将许多 CSS 技巧串联成具体的概念。
我在这里记录了它：

深入探讨 CSS 布局 - 关于本系列

波拉米·查克拉博蒂 ・ 2020 年 8 月 17 日

#css #webdev

除此之外，它还能增强我将图形可视化为基本形状组合的能力，并能够操纵这些形状来创建所需的图形。此外，我发现 CSS 艺术具有冥想的功效，因此我非常喜欢它。

工具（CSS 概念）

好的，我们开始吧。先了解一下创建 CSS 艺术作品所需的工具。

盒子模型

众所周知，CSS 中的一切都是盒子。因此，矩形（或正方形）是我们用来创建其他所有形状的基本形状。这是原始材料。
默认情况下，盒子的大小（宽度、高度）由内容以及指定的边距和填充决定。由于我们不包含任何 HTML 内容，因此需要明确指定（块状）盒子的宽度和高度——通常使用 div 元素。

::之前，::之后

除了每个元素之外，我们还可以使用伪元素::before和::after两个额外的盒子。我们可以用它们来添加一些细节，而不是在标记中添加更多元素。（一个很好的用法是为不同的部分添加新元素，并使用伪元素为某个部分添加诸如阴影、图案之类的细节。）

不要忘记添加content:''- 如果没有内容，则不会生成伪元素。

定位

CSS 艺术中一个非常重要的方面是定位形状，以便对齐或从基本形状创建复杂的形状。
这需要操作形状的坐标。为此，我们可能需要设置绝对定位或相对定位。

很多情况下，设置会很有帮助*{position: absolute}——相对于父元素计算位置更容易。但这并非总是必要的——我们可以根据具体情况使用相对定位，甚至使用 flex/grid（带 justify-content 的 Flex 是居中元素的绝佳工具）。关键在于弄清楚不同的盒子如何相互定位。

除了定位之外，z-index 还能方便地将元素定位到其他元素的前面或后面。*深入了解层叠上下文有助于加深对 z-index 的理解，从而更好地运用它（我在这里写了一篇关于这方面的文章）。

DOM 结构

这实际上并不影响 CSS 图像本身。这更多的是为了维护样式表。最好使用元素的层级结构来创建构成整个图像的各个部分。例如：眼睛 div 应该放在元素的 head div 内部，如果可能的话，使用::before，::after这样可以只创建该元素的细节（如果您限制了元素数量，则不需要这样做）。

边界半径

现在，我们将继续将正方形变成不同的形状。

边框半径不仅是创建圆形和椭圆形的好方法，而且也是创建有机形状的好方法。

本视频讲解了如何操作水平和垂直半径，以实现对半径的高级控制。
以下是您可以轻松生成半径的工具。

盒子阴影

在创作 CSS 艺术作品时，box-shadow除了模拟 3D 效果外，还可以创建形状的副本。可以对一个元素应用多个 box-shadow 来创建不同大小的多个副本。内嵌边框也可以用来创建阴影。

剪切路径

clip-path是创建自定义形状的另一种方法。

clip-path CSS 属性创建一个剪切区域，用于设置应该显示元素的哪个部分。

这是一个帮助创建所需形状的网站。

快速说明：

1. 有些形状（例如三角形、梯形）既可以通过 border 绘制，也可以通过 clip-path 绘制。clip-path 比 border 的优势在于更容易应用渐变。
2. border-radius并且box-shadow可能无法很好地与 clip-path 配合使用

渐变

渐变是 CSS 艺术中最常用的工具之一。在网站中，渐变用于在两种或多种指定颜色之间实现平滑过渡。然而，一旦我们掌握了使用方法，渐变就可以用来在 CSS 艺术中创建形状、图案、阴影等效果。

例如，在下面的笔中，书上的所有细节都是使用单个元素上的渐变创建的：

可以使用逗号分隔多个渐变，并记住背景是从下（最后）到上（第一个）渲染的。这是一篇很棒的文章，有助于加深对 CSS 渐变的理解。

将物体分解成基本形状

再次强调，这并非 CSS 属性，而是 CSS 艺术创作的一项基本要求。我们将想要绘制的内容分解成基本形状（盒子、圆形、半圆形、三角形、梯形等等），并尝试思考如何组合、重叠或对齐这些形状来创作我们的设计。
我们最初会对如何生成这些形状有一些想法（新建元素、通过盒子阴影复制、通过 border-radius 或通过渐变）。
（开始之前不必完全确定所有元素也没关系——在创作过程中进行即兴发挥也无妨！）

结论

以上就是你在创作 CSS 艺术作品时常用的工具。有时，可以使用多种不同的方法来创建相同的效果——具体使用哪种方法取决于其他相互关联的形状/因素。

例如：

• 使用 clip-path 或渐变来创建平行四边形 - 如果您需要 box-shadow，则 clip-path 不适合；
• 使用新的盒子或盒子阴影来创建新的形状 - 仅当所需形状具有相同的纵横比和形状时，盒子阴影才会起作用；盒子阴影可能会影响您的 z 定位

这没有什么公式——一开始，需要不断尝试。通过反复尝试，我们可以掌握很多细微之处和技巧。有时，选择一种方式仅仅取决于我们更习惯哪种方式。

一些注意事项：

i) 我还没有讨论响应式设计（为了暂时简化）。为了避免失真，至少对于内部元素，最好使用百分比单位。初期，针对较小的屏幕进行优化是可以的。对于外部元素，使用视口单位是创建响应式设计的好方法。（同时考虑最大宽度和最大高度以适应更大的屏幕）

ii) 虽然我提供了一些计算半径、剪切路径等工具的链接，但最好先通过反复试验来弄清楚——否则，就违背了提升 CSS 水平的初衷。（这只是个人观点）

iii) 检查浏览器兼容性。例如：Firefox 不支持 conic-gradient。您可以注意到以下画笔在 Chrome 和 Firefox 中的渲染效果有所不同。

就是这样。现在，我们将在第二部分中继续应用所有这些来创建一盏 CSS 灯。