使用 CSS 形狀的網絡藝術指導

已發表: 2022-03-10

快速總結 ↬設計師和“Web 藝術指導”的作者 Andy Clarke 在使用 CSS 創建令人興奮的新設計時從不害怕突破界限。在本教程中，他超越了基本的 CSS 形狀，並展示瞭如何使用它們為您的藝術導向設計創建五種獨特且引人入勝的佈局。

去年，Rachel Andrew 寫了一篇文章，重新審視了 CSS Shapes，她在其中重新向讀者介紹了使用 CSS Shapes 的基礎知識。對於任何想了解如何使用shape-outside 、 shape-margin和shape-image-threshold等屬性的人來說，Rachel's 是理想的入門讀物。

我見過很多使用屬性的例子，但很少有超越基本形狀的例子，包括circle() 、 ellipse() 、 inset() 。即使是使用polygon()形狀的示例也很少超出它們。考慮到 CSS Shapes 提供的創意機會，這令人失望。但是，我敢肯定，只要有一點靈感和想像力，我們就能做出更加獨特和引人入勝的設計。因此，我將向您展示如何使用 CSS Shapes 創建以下五種不同類型的佈局：

V形
Z 圖案
彎曲的形狀
對角線形狀
旋轉形狀

一點靈感

遺憾的是，您不會找到很多使用 CSS 形狀的網站的鼓舞人心的例子。這並不意味著靈感不存在——你只需要在廣告、雜誌和海報設計方面看得更遠一點。然而，僅僅模仿以前時代和媒介的作品對我們來說是愚蠢的。

在過去的幾年裡，我在 Dropbox 文件夾中充滿了靈感，我真的應該把這些例子移到 Pinterest 上。幸運的是，Kristopher Van Sant 比我更勤奮地編寫了一個 Pinterest 板，上面充滿了鼓舞人心的“文本形狀”示例。

形狀為設計增添了活力，這種運動吸引了人們。它們有助於將觀眾與您的故事聯繫起來，並在您的視覺內容和書面內容之間建立更緊密的聯繫。

當您需要內容圍繞形狀流動時，請使用shape-outside屬性。您必須向左或向右浮動元素才能使shape-outside產生任何效果。

  img { float: <values>; shape-outside: <values>; }
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>
<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 Shapes，這種設計感覺枯燥無味。右圖：創建 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'); }
[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'); }

CSS 形狀示例 — 使用圖像開發形狀時，請注意 CORS（跨域資源共享）。您必須在與您的產品或網站相同的域中託管圖像。如果您使用 CDN，請確保它發送正確的標頭以啟用形狀。還值得注意的是，在本地測試形狀的唯一方法是使用 Web 服務器。 `file://`協議根本行不通。

生成的內容

正如雷切爾在她的文章中解釋的那樣：

“您還可以使用圖像作為形狀的路徑來創建彎曲的文本效果，而無需在頁面上包含圖像。然而，你仍然需要一些東西來浮動，所以為此，我們可以使用生成的內容。”

作為 Alpha 通道的替代方案，我可以使用生成的內容——應用於兩個偽元素——一個用於左側的多邊形三角形，另一個用於右側。我的運行文本現在將在兩個生成的形狀之間流動：

  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%); }
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 剪輯路徑生成器是一個出色的工具，用於計算用於 CSS 形狀的坐標值。

2. Z 模式

Z 模式是我們的眼睛在從左到右、從上到下閱讀內容時所遵循的熟悉路徑。通過沿著形成 Z 的隱藏線放置內容，這些模式有助於引導讀者沿著這條路徑，我們希望他們從那裡開始閱讀到目的地，例如號召性用語。 Z 模式可以是謹慎的——通過焦點或具有更高視覺權重的元素暗示——或者使用 CSS 形狀變得明顯。

通過在兩個形狀之間驅動一列窄行文本創建的 z 模式暗示了人們在駕駛這款標誌性的小型汽車時將獲得的速度和樂趣。

在下一個設計中，一個謹慎的 z 模式形成為：

大圖像跨越整個頁面寬度，用右對齊的標題強調端點。
一個運行文本塊由兩個 CSS 形狀組成。
用作頁腳的圖形上的粗頂部邊框完成了 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>
<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-pattern 設計，我選擇包含兩個微小的 1×1px 佔位符圖像，我使用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'); }
[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 Module Level 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>
<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; }
[src*="shape"] { float: left; shape-outside: url('shape.png'); shape-margin: 3rem; }

鑑於響應性是 Web 的內在屬性之一，我們很少能預測內容將如何流動，但我們會避免這樣的設計。當我的所有運行文本的空間太小而無法容納在形狀上方時，每個形狀都是浮動的這一事實意味著內容將流入形狀下方的空間。

5. 旋轉形狀

為什麼要滿足於僅使用 CSS 網格和形狀，而將變換添加到混合中可以啟用幾年前無法想像的佈局？在最後一個示例中，在此圖像中的汽車周圍流動文本，同時旋轉整個構圖需要所有這些屬性的組合。

由於這些汽車的圖像沒有透明的 Alpha 通道，在形狀周圍流動文本，因此需要第二張圖像，該圖像僅包含 Alpha 通道信息。

這一次，我將可見圖像浮動到右側，並使用與我的 Alpha 通道圖像匹配的 URL 值應用shape-outside屬性：

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

您可能已經註意到，我的兩個圖像都包含我順時針旋轉十度的元素。有了這些圖像，我可以將整個佈局向相反方向旋轉 10 度，以產生我的圖像是直立的錯覺：

  body { transform: rotate(-10deg); }
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; }
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, [...]); }
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 不支持 Shapes。這種情況很快就會改變，因為微軟已經宣布從他們自己的 EdgeHTML 渲染引擎更改為 Chromium 的 Blink，與 Chrome 和 Opera 相同的引擎。

像 CSS Shapes 這樣的工具現在為我們提供了無數機會來使用藝術指導來吸引讀者的注意力並保持他們的參與度。我希望現在你和我一樣對他們感到興奮！

社論注： Andy 的新書《網絡藝術指導》（今天預訂您的副本）探討了 100 年的藝術指導以及我們如何利用這些知識和最新的網絡技術來創造更好的數字產品。 閱讀節選章節，了解本書提供的內容。