使用 CSS 形状进行 Web 艺术指导

Desknumber

设计师兼《Web 艺术指导》一书的作者 Andy Clarke 在使用 CSS 创造令人兴奋的新设计时从不害怕突破界限。在本教程中，他超越了基本的 CSS 形状，并向您展示了如何使用它们为您的艺术指导设计创建五种独特且引人入胜的布局。
去年，Rachel Andrew 写了一篇文章，重新审视了 CSS Shapes，其中她向读者重新介绍了使用 CSS Shapes 的基础知识。对于任何热衷于了解如何使用shape-outside、shape-margin、 和 等属性的人来说shape-image-threshold，Rachel 的本书是理想的入门读物。

我见过很多使用属性的示例，但很少有超出基 电子邮件营销列表 本形状的示例，包括circle(), ellipse(), inset()。即使使用polygon()形状的例子也很少超出它们。考虑到 CSS Shapes 提供的创意机会，这令人失望。但是，我相信只要有一点灵感和想象力，我们就可以做出更独特、更吸引人的设计。因此，我将向您展示如何使用 CSS Shapes 创建以下五种不同类型的布局：

遗憾的是，您不会找到许多使用 CSS Shapes 的鼓舞人心的网站示例。这并不意味着灵感不存在——你只需把目光放得更远一点，看看广告、杂志和海报设计。然而，仅仅模仿以前时代和媒介的作品对我们来说是愚蠢的。



您可以在令人惊讶的地方找到灵感，例如这些复古广告。
您可以在令人惊讶的地方找到灵感，例如这些复古广告。
在过去的几年里，我的 Dropbox 文件夹中充满了灵感，我真的应该将这些示例转移到 Pinterest。幸运的是，Kristopher Van Sant比我更勤奋地编写了一个 Pinterest 板，其中充满了鼓舞人心的“文本形状”示例。

形状为设计增添了活力，这种运动吸引了人们。它们有助于将观众与您的故事联系起来，并在您的视觉和书面内容之间建立更紧密的联系。

当您需要内容围绕形状流动时，请使用该shape-outside属性。您必须向左或向右浮动元素才能shape-outside产生任何效果。