[譯] Web 使用 CSS Shapes 的藝術設計

web 的藝術設計」 的做者及設計師 Andy Clarke,在使用 CSS 創造使人驚喜的新設計時,從未懼怕突破邊界。在本教程中,他超越了基本的 CSS 形狀,並展現瞭如何使用它們爲你藝術的設計建立五種獨特且有趣的佈局。css

去年,Rachel Andrew 寫了一篇文章,從新審視 CSS Shapes ,其中爲讀者從新介紹了 CSS Shapes 基礎的使用。對於任何渴望瞭解如何使用 shape-outsideshape-marginshape-image-threshold 等屬性的人來講,這篇文章是理想的入門讀物。html

我曾經見過不少用這些屬性的例子,可是不多見到 Shapes 的高級用法,包括 circle()ellipse()inset()。甚至連使用 polygon() 的例子少之更少。考慮到 CSS Shapes 提供的創造性機會,這種現象也太使人失望了。可是,我確信只要有一點靈感和想象力,咱們就能夠製做出更具特點和吸引力的設計。因此,接下來,我將向你展現如何使用 CSS Shapes 建立如下五種不一樣類型的佈局:前端

  1. V 型
  2. Z 型
  3. 彎曲型
  4. 對角線型
  5. 旋轉型

一點啓發

遺憾的是,你在一些使用 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');
}
複製代碼

一個 CSS 形狀的例子

使用圖像開發形狀時,請注意 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 形,它代表了在駕駛這款標誌性小型車時,人們會感覺到的速度和樂趣。

在這個設計中,一個不明顯的 Z 型造成以下:

  1. 大圖片橫穿整個頁面寬度,右對齊的標題強調斷點。
  2. 運行文本塊由兩個 CSS Shapes 組成。
  3. 做爲頁腳的圖形上的厚頂邊框完成了 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 展現了樂趣和速度。

左圖:一種缺少活力的可展示但卻很普通的設計。右圖:使用 CSS Shapes 展現了樂趣和速度。

標誌性的 Mini Cooper 駕駛起來快速而有趣。即便不用 CSS Shapes 作出的 Z 型佈局也能完美呈現頁面,但這種設計看起來很普通而且缺少活力。但經過操做兩個形狀之間的一小段流動文本,即可以建立的 Z 型佈局,這種佈局暗示了駕駛這輛標誌性小型車時的速度和樂趣。

3. 彎曲型

CSS Shapes 最迷人的一個方面是如何使用部分透明圖像中的 alpha 通道建立優雅的形狀。這種形狀能夠是我想象到的任何東西。我只須要建立一個圖像,瀏覽器將會在它周圍流動內容。

雖然 CSS Shapes 模塊 2 級規範 中已經提出將內容限制在形狀內,但目前沒法知道是否以及什麼時候能夠在瀏覽器中實現。不過,雖然 shape-inside(暫時)不可用,這並不表明我用 shape-outside 建立不出相似的結果。

左:另外一個可展現但普通的設計。右:使用 CSS Shapes 建立更獨特的外觀。

左:另外一個可展現但普通的設計。右:使用 CSS Shapes 建立更獨特的外觀。

經過將個人內容限制在右側浮動的曲線圖像中,我能夠輕鬆地爲下一個設計添加獨特的外觀。爲了建立形狀,我再次使用 shape-outside 屬性,此次使用的值與可見圖像的 URL 相同:

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

爲了在個人形狀和在其周圍流動的內容之間留出一些距離,shape-margin 屬性在第一個形狀的輪廓以外繪製出更多的形狀。我可使用任何 CSS 絕對長度單位 — 毫米、釐米、英寸、派卡、像素和點 — 或相對單位(chemexremvhvw):

[src*="curve"] {
  shape-margin: 3rem;
}
複製代碼

更多的邊距

爲這種彎曲的設計添加移動文本不只僅依賴於 CSS 形狀。使用視口寬度單位,我爲標題,圖像和運行文本提供不一樣的左邊距,每一個邊距與視口的寬度成比例。這會從個人標題尾部到汽車頭部造成一條對角線:

h1 {
  margin-left: 5vw;
}

img {
  margin-left: 10vw;
}

p {
  margin-left: 20vw;
}
複製代碼

4. 對角線型

角度可使佈局看起來不那麼結構化,感受更有生機。不設置明確的結構,能讓視野在組合物周圍自由漫遊。這種操做也能產生一種有活力的佈局。

我天天看到都是繞水平軸和垂直軸設置的設計,基於對角線的很稀少。每隔一段時間,我就會看到一個有角度的元素 - 也許是一個底部傾斜的橫幅圖形 - 但它對設計來講並無什麼必要。

在印刊設計中常常看到內容在形狀周圍流動,在 CSS Shapes 以前,這在 web 上是不可能實現的

在印刊設計中常常看到內容在形狀周圍流動,在 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?

爲何只使用 CSS Grid 和 Shapes?

因爲這些汽車的圖像沒有透明的 alpha 通道,所以,在形狀周圍的流動文本須要包含僅包含 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 年的藝術設計,以及咱們如何利用這些知識和最新的網絡技術來創造更好的數字產品。閱讀摘錄章節,瞭解這本書的內容。

更多資源

若是發現譯文存在錯誤或其餘須要改進的地方,歡迎到 掘金翻譯計劃 對譯文進行修改並 PR,也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。


掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區,文章來源爲 掘金 上的英文分享文章。內容覆蓋 AndroidiOS前端後端區塊鏈產品設計人工智能等領域,想要查看更多優質譯文請持續關注 掘金翻譯計劃官方微博知乎專欄

相關文章
相關標籤/搜索