CSS 艺术入门

本周 DEV 新闻通讯中的一个链接深深吸引了我。它指向一张由 Adam Kuhn 创作的纯 CSS 弗里达·卡罗 (Frida Kahlo) 图片。

如何利用代码创作艺术？

虽然我有一些 HTML 和 CSS 经验，但我不知道如何将各个部分组合在一起，仅使用 CSS 创建如此精美的图像。我决定寻找一些关于纯 CSS 图像的基础教程，并找到了 Michael Mangialard 的文章《纯 CSS 图像初学者指南》。这是一个很棒的初学者教程，逐步讲解了创建 CSS 考拉图像的每个步骤。考拉的每个部分都是一个单独的 HTML div 元素，并应用了不同的 CSS 样式。我强烈推荐大家看看这篇文章。

Michael Mangialard 的考拉 CSS 艺术：

我自己的 CSS 图像项目

我按照教程操作，并对代码进行了自己编辑，创建了猪图像而不是考拉。

我的 CSS pig 项目：

什么是 CSS 图像？

只需使用 HTML 和 CSS 代码即可创建 CSS 图像。HTML 是一种标记语言，它为网页提供基本结构和内容，而 CSS 则为这些内容提供样式。CSS 图像可以通过创建 HTML div 元素，然后为其指定不同的大小、形状、颜色和位置来创建整体图像。

HTML div 是一种标签，用于将元素分组，然后使用 CSS 设置其样式或使用 JavaScript 赋予其行为。

全部都是 Div

在这个项目中，构成图片的所有 div 元素都嵌套在一个父 div 中。这个父 div 就像一个隐形的框架，包裹着猪的头部。如果给父 div 添加一个红色边框，你可以看到它本质上是一个位于页面中心的盒子。子 div 元素的位置取决于它们与父 div 的关系。换句话说，猪的各个部分在页面上的位置都是相对于这个盒子的。

猪头 div 是盒子 div 的子元素，其定位基于其与该盒子的关系。

Z 索引

构成猪的其他元素也采用相同的定位和样式。其中一些元素还具有 z-index 属性，允许你按特定顺序将元素堆叠在一起。例如，猪的鼻子的 z-index 值比眼睛的要大，因为鼻子位于眼睛上方。

剪辑路径

div 元素自然会呈现矩形形状。您可以通过设置 border-radius 来使矩形的角弯曲，将 border-radius 设置为 50% 会得到一个圆形。

对于更复杂的形状，您可以使用 clip-path，它设置坐标来确定元素的哪个部分应该显示。需要注意的是，并非所有浏览器都支持 clip-path。您可以在Mozilla 网站上了解更多关于 clip-path 及其用法的信息。我使用了一款名为Clippy的工具，它由 Bennett Feely 创建，可以让你绘制所需的形状，并提供相应的代码。我用它绘制了猪耳朵的形状。

Clippy 允许您轻松制作 CSS 形状：

CSS 图像实用吗？

据我所知，CSS 图像在实际应用中效果不佳。使用设计程序创建 SVG 图像会更有效。然而，学习如何创建 SVG 图像是熟悉 CSS 样式的好方法，我发现它对我熟悉定位工作原理特别有帮助。

工具和参考：
纯 CSS 图像初学者指南
Adam Kuhn 的 Frida Kahlo CodePen
Clippy
W3Schools CSS
Clip-Path - Mozilla