[译] Web 使用 CSS Shapes 的艺术设计

时间 2019-11-08

标签 web 使用 css shapes 艺术设计栏目 HTML 繁體版

原文原文链接

原文地址：Art Direction For The Web Using CSS Shapes

原文做者：Andy Clarke

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：xujiujiu

校对者：Fengziyin1234, cyz980908, portandbridge

“web 的艺术设计” 的做者及设计师 Andy Clarke，在使用 CSS 创造使人惊喜的新设计时，从未惧怕突破边界。在本教程中，他超越了基本的 CSS 形状，并展现了如何使用它们为你艺术的设计建立五种独特且有趣的布局。css

去年，Rachel Andrew 写了一篇文章，从新审视 CSS Shapes ，其中为读者从新介绍了 CSS Shapes 基础的使用。对于任何渴望了解如何使用 shape-outside、shape-margin 和 shape-image-threshold 等属性的人来讲，这篇文章是理想的入门读物。html

我曾经见过不少用这些属性的例子，可是不多见到 Shapes 的高级用法，包括 circle()、ellipse()、inset()。甚至连使用 polygon() 的例子少之更少。考虑到 CSS Shapes 提供的创造性机会，这种现象也太使人失望了。可是，我确信只要有一点灵感和想象力，咱们就能够制做出更具特点和吸引力的设计。因此，接下来，我将向你展现如何使用 CSS Shapes 建立如下五种不一样类型的布局：前端

一点启发

遗憾的是，你在一些使用 CSS Shapes 的网站中找不到许多使人有启发的例子。但这并不意味着那里没有灵感 — 你只须要往深处寻找，好比广告、杂志和海报的设计。然而，若是只是模仿上一个时代的媒体对咱们来讲是愚蠢的。android

你能够在乎想不到的地方找到灵感，例如这些古董广告。ios

在过去几年里，我已经在 Dropbox 文件夹放满了个人灵感，我真的应该把这些实例转移到 Pinterest 上。幸运的是，比我勤奋的 Kristopher Van Sant 已经在收集一个充满启发性的 ‘形状文本’的例子的 Pinterest 板了。git

形状为设计增长了活力，并且这种操做吸引了人们。它们有助于将观众与你的故事联系起来，并在你的视觉和书面内容之间创建更紧密的联系。github

当你须要内容在形状周围流动时，使用 shape-outside 属性。你必须向左或者向右浮动元素，以便 shape-outside 产生效果。web

img {
  float: <values>;
  shape-outside: <values>;
}
复制代码

注意：当有流动的内容围绕在形状的周围时，请注意不要让任何文本行变得太窄而只能容纳一两个单词。后端

开发动态和原始的布局一般须要极少的标签。这五个设计系列的 HTML 只包含标题和主要元素、图形、图像，而且一般不会比下面的更复杂：浏览器

<header role="banner">
  <h1>Mini Cooper</h1>
</header>

<figure>
  <img src="mini.png" alt="Mini Cooper">
</figure>

<main>
…
</main>
复制代码

1. V 型

对我来讲，现代 CSS 一个超棒的地方就是，我不用绘制多边形路径，就能够用部分透明图像的 alpha 通道建立一个形状。我仅须要建立一个图像，剩下的事情浏览器均可以处理。

我认为这是 CSS 中最使人惊喜的补充之一，它使得开发 Web 艺术设计更加简单，特别是在你开发内容管理系统或动态生成的内容时。

左：没有 CSS 形状，这种设计感受枯燥无生气。右图：建立 V 形使这种设计更具特点和吸引力。

左图：没有 CSS 形状，这种设计感受枯燥无生气。右图：建立 V 形使这种设计更具特点和吸引力

要从图像中建立形状，它们必须具备彻底或部分透明的 alpha 通道。在第一个设计中，我不须要绘制多边形以使内容在两侧的三角形形状之间流动；相反，我只须要指定图像文件的 URL 做为 shape-outside 值：

[src*="shape-left"],
[src*="shape-right"] {
  width: 50%;
  height: 100%;
}

[src*="shape-left"] {
  float: left;
  shape-outside: url('alpha-left.png');
}

[src*="shape-right"] {
  float: right;
  shape-outside: url('alpha-right.png');
}
复制代码

使用图像开发形状时，请注意 CORS（跨源资源共享）。图像必须与产品或网站托管在同一个域里。若是你使用 CDN，请确保它发送正确的标头以启用形状。值得注意的是，在本地测试形状的惟一方法是使用 Web 服务器。file:// 协议根本不起做用。

Generated Content 模块

正如 Rachel 在她文章中说的那样：

“你还能够用一张图片做为形状的路径来作出弯曲文本的效果，并且在页面上能够不显示这张图片。可是，你仍须要浮动一些内容，所以，咱们可使用 Generated Content 模块。”

做为 alpha 通道的替代，我可使用 Generated Content — 应用于两个伪元素 — 一个用于左边的多边形，另外一个用于右边。运行的文本将在两个生成的形状之间流动：

main::before {
  content: "";
  display: block;
  float: left;
  width: 50%;
  height: 100%;
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
}

main p:first-child::before {
  content: "";
  display: block;
  float: right;
  width: 50%;
  height: 100%;
  shape-outside: polygon(100% 0, 0 100%, 100% 100%);
}
复制代码

注意：Bennett Feely 的 CSS clip-path 制做是一个很棒的工具，用于计算与 CSS Shapes 一块儿使用的坐标值。

在多个转折点处调整 alpha 图像的宽度，使之可以展现文本形状，以完美匹配其视口。

在多个转折点处调整 alpha 图像的宽度，就能让流动文本的形状完美匹配其视口。

2. Z 型

当从左到右，从上到下阅读时，Z 型是咱们眼睛所遵循的熟悉路径。经过沿着 Z 形的隐藏线放置内容，有助于引导读者沿着咱们但愿的路径阅读，例如 Call-To-Action（行动召唤）。低调的作法是用焦点或具备更高视觉重量的元素暗示，明显的作法则是使用 CSS Shapes。

在两个形状之间放入一小段文本，会造成一个 Z 形，它代表了在驾驶这款标志性小型车时，人们会感觉到的速度和乐趣。

在这个设计中，一个不明显的 Z 型造成以下:

大图片横穿整个页面宽度，右对齐的标题强调断点。
运行文本块由两个 CSS Shapes 组成。
做为页脚的图形上的厚顶边框完成了 Z 型。

没有必要使用复杂的标签来实现这个设计，个人 HTML 简单到只包含下面三个元素：

<header role="banner">
  <h1>Mini Cooper:icon of the ’60s</h1>
  <img src="banner.png" alt="Mini Cooper">
</header>

<main>
  <img src="placeholder-left.png" alt="" aria-hidden="true">
  <img src="placeholder-right.png" alt="" aria-hidden="true">
  …
</main>

<figure role="contentinfo">
…
</figure>
复制代码

横跨整页的标题和图形的设计没什么须要说明的，可是两个多边形之间的流动文本设计有点复杂。为了实现这种 z 型设计，我选择将两个 1 x 1 px 的微小图像，放置到使用 shape-outside 的两个大的形状图像上。经过给这些图像设置 aria-hidden 属性，浏览器就不会绘制他们。

给两个形状图像提供相同的尺寸后，我向左浮动一个图像，向右浮动另外一个图像，这样个人运行文本就能够在它们之间流动：

[src*="placeholder-left"],
[src*="placeholder-right"] {
  display: block;
  width: 240px;
  height: 100%;
}

[src*="placeholder-left"] {
  float: left;
  shape-outside: url('shape-right.png');
}

[src*="placeholder-right"] {
  float: right;
  shape-outside: url('shape-right.png');
}
复制代码

左图：一种缺少活力的可展示但却很普通的设计。右图：使用 CSS Shapes 展现了乐趣和速度。

标志性的 Mini Cooper 驾驶起来快速而有趣。即便不用 CSS Shapes 作出的 Z 型布局也能完美呈现页面，但这种设计看起来很普通而且缺少活力。但经过操做两个形状之间的一小段流动文本，即可以建立的 Z 型布局，这种布局暗示了驾驶这辆标志性小型车时的速度和乐趣。

3. 弯曲型

CSS Shapes 最迷人的一个方面是如何使用部分透明图像中的 alpha 通道建立优雅的形状。这种形状能够是我想象到的任何东西。我只须要建立一个图像，浏览器将会在它周围流动内容。

虽然 CSS Shapes 模块 2 级规范中已经提出将内容限制在形状内，但目前没法知道是否以及什么时候能够在浏览器中实现。不过，虽然 shape-inside（暂时）不可用，这并不表明我用 shape-outside 建立不出相似的结果。

左：另外一个可展现但普通的设计。右：使用 CSS Shapes 建立更独特的外观。

经过将个人内容限制在右侧浮动的曲线图像中，我能够轻松地为下一个设计添加独特的外观。为了建立形状，我再次使用 shape-outside 属性，此次使用的值与可见图像的 URL 相同：

[src*="curve"] {
  float: right;
  width: 400px;
  height: 100vh;
  shape-outside: url('curve.png');
}
复制代码

为了在个人形状和在其周围流动的内容之间留出一些距离，shape-margin 属性在第一个形状的轮廓以外绘制出更多的形状。我可使用任何 CSS 绝对长度单位 — 毫米、厘米、英寸、派卡、像素和点 — 或相对单位（ch、em、ex、rem、vh 和 vw）：

[src*="curve"] {
  shape-margin: 3rem;
}
复制代码

4. 对角线型

角度可使布局看起来不那么结构化，感受更有生机。不设置明确的结构，能让视野在组合物周围自由漫游。这种操做也能产生一种有活力的布局。

我天天看到都是绕水平轴和垂直轴设置的设计，基于对角线的很稀少。每隔一段时间，我就会看到一个有角度的元素 - 也许是一个底部倾斜的横幅图形 - 但它对设计来讲并无什么必要。

在印刊设计中常常看到内容在形状周围流动，在 CSS Shapes 以前，这在 web 上是不可能实现的。

即便 CSS Grid 只涉及到列和行的设置，也没有理由不使用它来建立动态对角线。下一个设计只须要一个标题和主要元素：

<header role="banner">
  <h1>Mini Cooper</h1>
  <img src="banner.png" alt="Mini Cooper">
</header>

<main>
  <img src="shape.png" alt="">
  …
</main>
复制代码

为了在这个设计中建立对角线细节，我再次围绕一个向左浮动的形状图像流动内容。我再次使用 shape-outside 属性，其 URL 与可见图像相同，并在个人形状和围绕它的内容之间使用 shape-margin 设置距离：

[src*="shape"] {
  float: left;
  shape-outside: url('shape.png');
  shape-margin: 3rem;
}
复制代码

鉴于响应式是网络的内在属性之一，咱们很难预测内容将如何流动，但咱们能够避免像这样的设计。若是全部正在运行的文本由于空间过小而没法适应形状，那每一个形状都浮动意味着内容将流入到形状下方的空间。

5. 旋转型

为何要知足于只使用 CSS Grid 和 Shapes 呢？有些几年前不可思议的布局，如今只要再引入 Transforms 就能作出来了。在最后一个例子中，要作到围绕图像中的汽车流动文本，同时旋转整个布局，须要这些属性的全部组合。

为何只使用 CSS Grid 和 Shapes？

因为这些汽车的图像没有透明的 alpha 通道，所以，在形状周围的流动文本须要包含仅包含 alpha 通道信息的第二个图像。

实现这种设计须要两个图像：一个可见，另外一个要有 alpha 通道信息。

这一次，我向右浮动可见图像并应用 shape-outside 属性，其 URL 与个人 alpha 通道图像同样：

[src*="shape"] {
  float: right;
  width: 50%;
  shape-outside: url('alpha.png');
  shape-margin: 1rem;
}
复制代码

你可能已经注意到个人两个图像都包含了我顺时针旋转了 10 度的元素。这些图像就位后，我能够朝相反的方向上旋转整个布局 10 度，以给出个人图像直立的错觉：

body {
  transform: rotate(-10deg);
}
复制代码

我将此布局旋转到足以使设计更具吸引力的角度，但却不会牺牲可读性。

栗子免费送：多边形形状塑造列

摘自 2019 年 3 月 26 日的“网上艺术指南”。

你能够建立仅具备类型的强大结构形状。结合 polygon() 形状和伪元素，你能够从运行文本的实体块中建立形状，就像 Alexey Brodovitch 的风格和他对 Harper’s Bazaar 有影响力的做品同样。

左：这些漂亮的数字太可爱了。它们也很是适合刻在那些内容上。右：当我使用没有背景或边框的不可见伪元素来开发多边形时，结果是两个异常形状的内容。

我用两个文章构成这些列，即它们之间有一个沟槽和最大宽度，这有助于保持温馨度：

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2vw;
  max-width: 48em;
}
复制代码

由于有两个文章元素，我还为个人网格指定了两列，因此没有必要具体说明这些文章的位置。我可让浏览器为我放置它们，剩下的就是将 shape-outside 应用于每列中生成的伪元素：

article:nth-of-type(1) p:nth-of-type(1)::before {
  content: "";
  float: left;
  width: 160px;
  height: 320px;
  shape-outside: polygon(0px 0px, 90px 0px, [...]);
}

article:nth-of-type(2) p:nth-of-type(2)::before {
  content: "";
  float: right;
  width: 160px;
  height: 320px;
  shape-outside: polygon(20px 220px, 120px 0px, [...]);
}
复制代码

成果

如今 Firefox 已经发布了一个支持 CSS Shapes 的版本，并在其开发工具中启动了一个 Shape Path Editor 插件，目前只有 Edge 不支持 CSS Shapes。因为微软宣布将他们本身的 EdgeHTML 渲染引擎改成 Chromium 的 Blink 引擎（一个与 Chrome 和 Opera 相同的引擎），这种状况很快就会改变。

像 CSS Shapes 这样的工具如今为咱们提供了无数能够利用艺术设计吸引读者的注意力并让他们保持参与的机会。我但愿你如今和我同样兴奋！

编者注: Andy 的新书，《Web 艺术设计》（预购地址），探索了 100 年的艺术设计，以及咱们如何利用这些知识和最新的网络技术来创造更好的数字产品。阅读摘录章节，了解这本书的内容。