基於單個 Div 的 CSS 繪圖

01-29

譯註：通讀本文，強烈地感受到了技術與藝術的結合！贊作者的這句話：Restricting your available options forces you to re-evaluate the tools you already have.
限制你的可選項，會讓你重新評估手頭上已有的工具。

為什麼只使用一個 Div？

2013年5月，我參加了 CSSConf，看到了Lea Verou 關於 border-radius 的演講，你可能會認為這個屬性很不起眼。但是這個演講讓我大開眼界，認識到 CSS 還有很多行為我是不了解的。回憶起我還是藝術生的那段時光，不斷地推動著我成為所選媒介的專家。作為一個 Web 設計師，CSS 是我的媒介，因此我盡我所能地學習，探索它的極限。

為什麼只有一個 Div？

回憶我以前學畫的時候，課堂上還做了混合顏色的實驗，我們就使用三原色，紅、黃、藍，創造出了其他顏色的光譜。這個實驗的目的是讓我們了解顏色的特性，同時這種限制也讓我們明白了混合的力量。你當然可以買一隻綠色的筆，但是你也可以使用藍色和黃色把綠色做出來。限制你的可選項，會讓你重新評估手頭上已有的工具。

我決定開始一個使用 CSS 繪畫的項目，過段時間我就會給出一個只用 CSS 繪製的新東西。為了得到更大的挑戰，探索 CSS 的潛力，我給自己定了這個限制，只是用一個 Div。不能直接買一隻綠色的筆（添加更多的 Div），我要做的就是盡其所能地結合 CSS 屬性來實現我的目的。

工具箱

一個 Div 加上瀏覽器支持的那些 CSS 屬性，看起來可用的工具太少了。但是我發現問題不在於你在使用多少東西，而在於你如何看待你在使用的東西。

偽元素

因為 CSS 有偽類，所以雖然只有一個 Div，但實際上我可以使用三個元素。因此，使用 div，div:before，div:after，我們可以這樣：

div { background: red; }ndiv:before { background: yellow; }ndiv:after { background: blue; }n

容易想到，這三個元素可以並排成為三個疊在一起的層。因此，在我的腦海中，它看起來是下面這樣的：

形狀

使用 CSS 和單個元素，我們可以製作三種基礎圖形。使用 width 和 height 屬性製作正方形/矩形，使用 border-radius 製作圓/橢圓，使用 border 製作三角形/梯形。

我們還可以使用 CSS 創建其他圖形，不過大部分都可以簡單組合這些基礎圖形來實現，這些簡單的圖形最容易製作，也最容易修改。

多個相同的形狀

使用疊加的 box-shadow，我們可以創建多個相同的形狀，這些形狀可以擁有不一樣的大小、顏色和模糊效果。我們可以在x或者y軸上移動這些圖形，因此幾乎可以繪製無限的圖形。

div {n box-shadow: 170px 0 10px yellow,n 330px 0 0 -20px blue,n 330px 5px 5px -20px black;n}n

我們甚至可以給 box-shadow 添加 box-shadow。注意它們申明順序。再者，把它們當做層更容易理解。

漸變

漸變通過給定一個光源，可以被用來製造明暗和深淺效果，可以讓簡單扁平的圖形看起來更真實。結合多個 background-image，我們可以使用很多層的漸變來實現更加複雜光影，甚至是更多的圖形。

div {n background-image: linear-gradient(to right, gray, white, gray, black);n}n

div:after {n background-image: radial-gradient(circle, yellow 50%, transparent 50%), linear-gradient(to right, blue, red); n}n

視覺

最困難的部分視覺，即如何拼湊這些形狀成為可被感知的繪圖。隨著我越來越注重繪圖的技巧，發現視覺這一步很重要。為了做到這一點，我常常凝視這主題相關的圖片，將其切割為多個可視的部分。都是一個個形狀，都是一個個顏色。我把整張圖片簡化為一些小的帶顏色形狀或者區塊，我知道（大體上）如何使用 CSS 來實現它們。

實例

我們一起仔細看看兩個繪圖，並學習如何分解成不同的區塊，合成一個大的圖形。第一個就是一支綠色的蠟筆。

蠟筆由兩個基礎圖形構成：矩形的筆身和三角形的筆尖。

我必須實現下面這些點來捕獲真實蠟筆的感覺：

紙質包裝上不同的顏色
印刷在包裝上的形狀和文字
條紋暗示蠟筆是圓的
明暗效果，暗示圓形的蠟筆和光源

首先，我使用 Div 和 background 顏色製作蠟筆的身體部分，從頂部到底部漸變，並使用 box-shadow 暗示立體感：

div {n background: #237449;n background-image: linear-gradient(to bottom,n transparent 62%,n black(.3) 100%);n box-shadow: 2px 2px 3px black(.3);n}n

然後，我使用一個從左到右的 linear-gradient 製作紙包裝。alpha 值為.6，這樣的之前的漸變可以透出來。

div {n background-image: linear-gradient(to right,n transparent 12px,n rgba(41,237,133,.6) 12px,n rgba(41,237,133,.6) 235px,n transparent 235px);n}n

接下來，我繼續使用同樣的方式，從左到右漸變，製作蠟筆上的條紋。

div {n background-image: linear-gradient(to right,n transparent 25px,n black(.6) 25px,n black(.6) 30px,n transparent 30px,n transparent 35px,n black(.6) 35px,n black(.6) 40px,n transparent 40px,n transparent 210px,n black(.6) 210px,n black(.6) 215px,n transparent 215px,n transparent 220px,n black(.6) 220px,n black(.6) 225px,n transparent 225px);n}n

紙包裝上印刷的橢圓，使用一個 radial-gradient 輕鬆搞定！

div {n background-image: radial-gradient(ellipse at top,n black(.6) 50px,n transparent 54px);n}n

我剛才單獨展示了各個部分，不過別忘了 background-image 看起來是這樣的：

div {n // ellipse printed on wrappern background-image: radial-gradient(ellipse at top,n black(.6) 50px,n transparent 54px),n // printed stripesn linear-gradient(to right,n transparent 25px,n black(.6) 25px,n black(.6) 30px,n transparent 30px,n transparent 35px,n black(.6) 35px,n black(.6) 40px,n transparent 40px,n transparent 210px,n black(.6) 210px,n black(.6) 215px,n transparent 215px,n transparent 220px,n black(.6) 220px,n black(.6) 225px,n transparent 225px),n // wrappern linear-gradient(to right,n transparent 12px,n rgba(41,237,133,.6) 12px,n rgba(41,237,133,.6) 235px,n transparent 235px),n // crayon body shadingn linear-gradient(to bottom,n transparent 62%,n black(.3) 100%)n}n

完成了 div，我們把注意力轉移到 :before 偽類元素上，創建蠟筆的筆頭。使用實心和透明的邊框，我製作了一個三角形，把它和我之前繪製的 div 放到一起。

div:before {n height: 10px;n border-right: 48px solid #237449;n border-bottom: 13px solid transparent;n border-top: 13px solid transparent;n}n

比起蠟筆筆桿，筆頭看起來有點平，我們可以使用 :after 偽類元素來修復這個問題。我添加一個從頂部到底部的 linear-gradient，製作了一個反光效果，貫穿整隻蠟筆。

div:after {n background-image: linear-gradient(to bottom,n white(0) 12px,n white(.2) 17px,n white(.2) 19px,n white(0) 24px);n}n

這給那個扁平的三角形添加更多的層次感，更加真實。製作接近尾聲，我給 :after 添加一些文字，定位，使得看起來像是印刷在蠟筆包裝上的一樣。

div:after {n content: green;n font-family: Arial, sans-serif;n font-size: 12px;n font-weight: bold;n color: black(.3);n text-align: right;n padding-right: 47px;n padding-top: 17px;n}n

大功告成！

另外一個實例

蠟筆作為一個不錯的例子，很好地展示了如何使用 background-image 和 gradient 來產生真實的效果。下面這個例子將展示多個 box-shadow 的強大之處：單 div 的照相機。

這是照相機的主體部分，使用 background-image 和 border-image 製作的。

下面是一張 gif，展示 :before 偽類元素（黑色的那個矩形），以及使用它的 box-shadow 創建出來的很多照相機的細節部分。

div:before {n background: #333;n box-shadow: 0 0 0 2px #eee,n -1px -1px 1px 3px #333,n -95px 6px 0 0 #ccc,n 30px 3px 0 12px #ccc,n -18px 37px 0 46px #ccc,n n -96px -6px 0 -6px #555,n -96px -9px 0 -6px #ddd,n n -155px -10px 1px 3px #888,n -165px -10px 1px 3px #999,n -170px -10px 1px 3px #666,n -162px -8px 0 5px #555,n n 85px -4px 1px -3px #ccc,n 79px -4px 1px -3px #888,n 82px 1px 0 -4px #555;n}n

類似的，下面是 :after（灰色的圓）以及使用它的 box-shadow 製作的幾個細節部分。

div:after {n background: linear-gradient(45deg, #ccc 40%, #ddd 100%);n border-radius: 50%;n box-shadow: 0 3px 2px #999,n 1px -2px 0 white,n -1px -3px 2px #555,n 0 0 0 15px #c2c2c2,n 0 -2px 0 15px white,n -2px -5px 1px 17px #666,n 0 10px 10px 15px black(.3),n n -90px -51px 1px -43px #aaa,n -90px -50px 1px -40px #888,n -90px -51px 0 -34px #ccc,n -90px -50px 0 -30px #aaa,n -90px -48px 1px -28px black(.2),n n -124px -73px 1px -48px #eee,n -125px -72px 0 -46px #666,n -85px -73px 1px -48px #eee,n -86px -72px 0 -46px #666,n 42px -82px 1px -48px #eee,n 41px -81px 0 -46px #777,n 67px -73px 1px -48px #eee,n 66px -72px 0 -46px #666,n n -46px -86px 1px -45px #444,n -44px -87px 0 -38px #333,n -44px -86px 0 -37px #ccc,n -44px -85px 0 -34px #999,n n 14px -89px 1px -48px #eee,n 12px -84px 1px -48px #999,n 23px -85px 0 -47px #444,n 23px -87px 0 -46px #888;n}n

有點瘋狂？不過你看到了吧，多個 box-shadow 確實可以給使用單個 div 繪圖添加很多細節部分。

最大的挑戰

我碰到了兩個最大的挑戰，三角形的限制和 gradient 獨特的行為。

三角形的問題

因為三角形是使用 border 創建的，這極大地限制了我對它的利用。使用 border-image 給 border 添加 gradient，不能單獨添加其中一邊。無法給 border 創建出來的三角形添加 box-shadow，因為 box-shadow 是添加在盒模型上的。因此要創建多個三角形就會很困難。看起來就是下面這樣：

div {n border-left: 80px solid transparent;n border-right: 80px solid transparent;n border-bottom: 80px solid red;n}n ndiv:before {n border-left: 80px solid transparent;n border-right: 80px solid transparent;n border-bottom: 80px solid red;n border-image: linear-gradient(to right, red, blue);n}n ndiv:after {n border-left: 80px solid transparent;n border-right: 80px solid transparent;n border-bottom: 80px solid red;n box-shadow: 5px 5px 5px gray;n}n

多層漸變

漸變的行為就是會填滿整個 background。在堆疊多個 gradient 的時候就顯得很講技巧。需要花費額外的時間思考透明度、z-index這些事，還要搞清楚什麼要可見，什麼不要。不過若能有效地使用 gradient，我們的繪圖可以包含很多令人驚嘆的細節。

Tardis 就是一個很好的例子，顯示或隱藏漸變，創建了一張細節極強的圖片。下圖顯示的是繪製的中間過程，可以看到數個從頂部到底部的漸變，寬度填滿整個容器。

使用從左到右和從右到左的 gradient，我可以遮住一部分漸變，同時把其他部分漸變顯示出來。

最終的結果看上去包含了很多圖形來構成 Tardis 的前面，但實際上它就是層疊的 linear-gradient。很多時候不得不偽造呀。

動態地查看它們

源於這個項目，有一個非常酷非常有用的好東西突然出現，那就是 Rafael Carício 開發的名為 CSS Gradient Inspector 的 Chrome 瀏覽器插件。這個開發工具可以探測且可以開關元素上的每一個 gradient，看起來就像開關一個個層。（它在日常項目中也非常有用。）

我希望設計師和開發者使用動畫或者 JavaScript 的功能來做類似的嘗試，或者對這些繪畫做一些變形。你可以到 a.singlediv.com 或者 GitHub 上把玩一下這些 CSS。

原文：Single Div Drawings with CSS