曉查 郭一璞 發自 凹非寺

量子位 報道 | 公眾號 QbitAI

HTML不是程式語言，但這並不妨礙精通它的大佬玩出花來。

普通的前端，用HTML+CSS製作網頁，元素簡單，工具豐富。

大佬級前端，用HTML+CSS繪畫，全程不用PS、AI這種圖形化的圖片編輯器，單純敲一行行程式碼純手工繪製。

把程式碼轉換之後，就變成了鮮嫩的水果：

或者畫出洛可可風格的古典女性肖像：

還有弗拉芒巴洛克肖像風格的人物畫像，充滿了中世紀的禁慾感：

現代的也有，比如這位在粉色燈光下的著禮服的妹子：

以及充滿者50年代氣息的復古風人物海報：

曲線、光影、漸變，每個元素都相當複雜。

而且，創作過程中不用SVG，只用Atom文字編輯器和Chrome開發者工具。

也就是說，畫面上的每一條曲線和漸變、每一處高光和陰影、每一根頭髮和睫毛、每一片蕾絲和褶皺，都是一行行程式碼從頭敲出來的！

如此精細程度和創造力，讓學美術的網友感嘆“學畫畫不如寫程式碼”，讓學計算機的同學覺得“別人寫的這麼藝術，一定是我的教科書開啟方式不對”。

真·交叉學科大佬。

它們的作者，是灣區前端大神Diana Smith小姐姐，她目前是企業及軟體開發商Atlassian的一名資深Web開發。

繪製過程

Diana在專門討論CSS的網站CSS-Tricks寫下了詳細的教程。

畫出這樣一個圖形分成幾步？

如果不用CSS，一般都是直接嵌入這個特殊的圖形。

如果用CSS，那麼就從黑色矩形開始，然後在兩側加上上兩個

與白色背景顏色匹配的邊框半徑元素。

先畫出一個黑色矩形，然後兩邊用圓弧遮擋。有了基礎形狀後，下一步就是給它添上漸變的背景。但是如果用矩形方式填充，得到的效果就是這樣的：

Diana的辦法是：在保留矩形的同時，加上兩個彎曲的div，把凹進去的部分也填充上。

最後完整的程式碼是這樣的：

div{  width： 500px；  height： 350px；  background： #000；  position： relative；  &：：after， &：：before{    width： 20%；    height： 100%；        position： absolute；    top： 0；    z-index：2；    content： “”；        background： #1e5799； background： -moz-linear-gradient（top， #1e5799 0%， #7db9e8 100%）； background： -webkit-linear-gradient（top， #1e5799 0%，#7db9e8 100%）；background： linear-gradient（to bottom， #1e5799 0%，#7db9e8 100%）； filter： progid：DXImageTransform。Microsoft。gradient（ startColorstr=‘#1e5799’， endColorstr=‘#7db9e8’，GradientType=0 ）；   }  &：：after{    border-radius： 100% 0% 0% 100%；       right： 0；  }  &：：before{    border-radius： 0 100% 100% 0；       left： 0；  }   }body{  background： #1e5799； background： -moz-linear-gradient（top， #1e5799 0%， #7db9e8 100%）； background： -webkit-linear-gradient（top， #1e5799 0%，#7db9e8 100%）； background： linear-gradient（to bottom， #1e5799 0%，#7db9e8 100%）； filter： progid：DXImageTransform。Microsoft。gradient（ startColorstr=‘#1e5799’， endColorstr=‘#7db9e8’，GradientType=0 ）； }

你也可以去這個完成檢視CSS樣式的實際執行效果：

https：//codepen。io/jean-jordan/pen/KeKaBw

剛剛我們畫的那幅畫像不像人的脖子？好的，我們再回到人像畫上，Diana繪製人物的脖子也是類似的過程。

在上面這張圖裡，我們看到了Diana如何逐步改形狀，最終得到了油畫中人物的脖子。

但是僅僅會畫各種幾何形狀，是無法生成藝術品的，Diana總結了她在繪圖中的5個重要CSS屬性。

1、

邊界半徑

（border-radius）

邊界半徑是為了讓矩形的邊角過渡得更自然，對於大多數網頁開發者來說，只需一個引數border-radius，可以設定不同的半徑數值。

border-radius： 15px 10px 40px 30px / 40px 10px 15px 30px；

2、

盒子陰影

（box-shadow）

對多個盒子陰影進行分層是增加深度的最佳方法之一。框陰影將粘附到html容器的邊緣，也會沿著邊界半徑定義的邊緣。

box-shadow： 6px -11px 20px 1px red， -15px -15px 5px -10px blue， inset 5px 5px 35px 10px green；

開發者可以指定模糊半徑，以及陰影是向內延伸還是向外延伸。

3、

變形

（transform）

變形的主要方式有：旋轉（rotate）、縮放（scale）和傾斜（skew）

transform： rotate（-45deg）transform： scale（0。7， 1。3）transform： skew（25deg， 30deg）；

此外還有透視，讓物體產生遠小近大的視覺效果，或者是僅僅為畫出一個梯形。

transform： perspective（10px） rotateY（5deg）；

4、

線性梯度

（linear-gradient）和

徑向梯度

（radial-gradient）

線性梯度用於定義一個方向上的漸變效果，徑向梯度用於定義圓和橢圓形的漸變效果

background-image： linear-gradient（0deg， blue， transparent 60%），radial-gradient（circle at 70% 30%， purple， transparent 40%）；

5、

層疊

（overflow）

層疊是一種將大量雜亂元素填充到一個整齊的包中的方法，可以建立一些有趣的形狀。在變形那部分的基礎上使用hidden引數，可以把邊緣遮蓋起來。

overflow： hidden；

以上5種元素缺一不可，隨便少一種都會產生怪異的效果。

△

從左至右分別是缺少邊界半徑、陰影、變形、梯度、層疊的效果（點選檢視大圖）

不過即使這樣，也很有抽象藝術的美感，彷彿在看畢加索的作品。

只適用於Chrome

不過，由於這是一個純個人藝術創作，Diana小姐姐並不關心瀏覽器適配性。

因此，這些程式碼在Chrome裡可以完美展現，但如果用其他瀏覽器開啟，可能就會出現不一樣的效果。

比如，MAC上的Safari瀏覽器開啟，妹子的眼睛就方了：

肩膀上的高光，變成了一個大圈圈：

胸前的禮服上，也被潑了一道墨：

如果用早期的Chrome開啟，會出現驚悚的頭身分離的效果：

早期的Opera瀏覽器，開啟之後臉方了：

Windows 7上從IE 6到IE 11，顯示出來的都是這個鬼樣子：

濃重的線條，甚至有點抽象藝術的感覺。

同樣是早期IE，放到Mac上也一樣鬼畜，這是IE 5。1。7的效果：

還有人試了試，在Windows 98系統的IE 7瀏覽器開啟，會變成非常畫素風的樣子：

最恐怖的是三星手機上的夜間模式開啟：

連人種都變了啊！

其他的幾張畫，換個瀏覽器開啟也比較鬼畜。

妹子你bra裡的鋼圈出來了啊！

拉夫領變得透明而有光澤，領口的蕾絲乾脆斷掉了，彷彿是逃難時期的肖像畫。

最後，如果你在iPhone上裝了Chrome，出來的也是Safari的效果，想看完整效果的話，請在安卓手機或者電腦的Chrome上開啟。

因此，有不少網友都覺得，這幾幅畫可以當成瀏覽器測試專案，一試就能知道核心用的是誰家的。

反向繪圖

CSS太難，學不會？不要緊，雖然我們不能把程式碼變成圖片，但是可以把圖片變成程式碼啊。

沒錯，就是

ASCII藝術

，早在DOS時期，就有人用命令列介面來顯示圖片。直到今天已成為一種流行的網際網路文化。

用單色字元來畫出世界名畫已經不算新鮮事。最近又有個碼農開發了一個新的專案

Primg

，讓任何一幅畫都可以用質數來表示。

比如蒙拉麗莎，就可以用一個3萬位的質數二進位制方式繪製出來。

傳送門：

作者的GitHub：https：//github。com/cyanharlow

作者部落格主頁：https：//diana-adrianne。com/

教程：https：//css-tricks。com/solving-lifes-problems-with-css/

用質數生成任意ASCII藝術：https：//github。com/geonnave/primg

— 完 —

量子位 QbitAI · 頭條號簽約作者

關注我們，第一時間獲知前沿科技動態