可能你早就听说过“ASCII艺术”这种说是代码创建的图片，即使没听说过这个名词也肯定早就用过它。一点儿也不奇怪，在还没有Emoji表情可以用的年代，你肯定用过:-D、$_$、^(oo)^之类吧。用ASCII码直接生成图形就是这种艺术的基本形式，也有人会用它来做出比较复杂一点的像是一朵花、一只小熊什么的样子，当然，我要贴出下面这种图你就会瞬间明白，哦——

真是的，类似玩意儿从小到大没少看过，也没啥好稀奇的了。 此前，我们在讨论AI艺术的《有脸的肖像不存在主人，没脸的肖像超越时间》、《这一次，AI打败的是当代艺术家们》等文章里，也介绍过用人工智能来画画的一些技术，GAN和CAN，分别指的是生成式对抗网络（Generative AdversarialNetwork）和创造性对抗网络（Creative Adversarial Network）。

去年七月份，微软的机器人小冰，在中国艺术家邱志杰的调教下，也以“夏语冰”的名字出道，假毕业展之名在中央美术学院美术馆举办了《或然世界 Alternative Worlds》作品展，在没有揭晓真相之前，人们纷纷以为那些颇为娴熟的画作出自一位18岁的天才少女之手。

有了上述储备的你，估计在第一眼看到“代码作画”的时候，毫不以为然，觉得这很正常嘛很多案例在先，但我要告诉你的是，这次不一样，本文要介绍的这位作者是一位真正的生物学意义上的人类，而且是用手写方式写下几千行代码来完成质感极高的作品的，而不是上面ASCII码蒙娜丽莎那般的粗糙。话不多说，先上图。

这张广告招贴画似的水果，看上去虽然还没那么逼真，但在光和色彩的变换上已经蛮丰富的了，查了一下代码，使用了427行写就，每一行，都是那位叫做Diana Smith的小姐姐一个键一个键地敲出来的，看到这里，是不是突然有点肃然起敬？

小姐姐长这样，这是她在GitHub上的头像，我觉得挺美的，其真实身份是一位生活工作在湾区的UI工程师，也是一位在GitHub和Tweet上拥有不少关注者的技术牛人。

平常乐于在网上分享自己的JavaScript开发和CSS开发经验，近来更因为分享了这组用代码和层叠样式表在html上显示的图片而引起了圈内的热议，像每个热爱分享的程序猿一样，Diana不仅po出了美美的照片，还挺详尽地给了一些指南，提醒想要效仿的人最该注意的一些坑。

水果之外的其他四张都是女性半身像，有现代的也有古代的，神情各异，一个个风姿绰约，从中也可以看出小姐姐的艺术修养相当不错。

这四张图，源代码从几百到上千行不等，其中最新完成的是那张蕾丝花边黑礼服的贵族妇人，叫做Pure CSS Lace，今年11月中旬才上传，而那张水蓝色礼服的金发女子叫做PureCSS Francine，去年9月发出来之后，就在一些技术社区被各种赞美和分析过。

比如著名的技术博主Andy Baio就在tweet上呼吁，Francine不应只被直接观看，你还得去看看其中的代码之美。它具有层层层叠的复杂代码，这些层数必须花大量时间才能手工布置和拼合，一个参数的不慎，就会让它呈现出奇怪的效果。

Diana自己在指南中列举了五个会影响作者成败的要素，它们分别是：边界半径（border-radius）、盒子阴影（box-shadow）、动态（transform）、线性/径向梯度（linear-gradient, radial-gradient）、溢出（overflow）。

对于大多数web开发目的，边界半径的最大用处就是用来得到圆角，比如生成一个按钮，但自定义的圆形元素意味着它可以拿来模拟有机物体，比如面孔，又比如脖子。Francien的脖子就是从一个矩形开始，通过调整半径来陆续逼近的。

盒子阴影顾名思义就是给盒子添加阴影，它不仅可以使得图片更加真实自然，也可以被用来作为增加深度的最佳方法。

此外，要改变元素以使它们具有运动感或透视感，就要用到旋转、移动、缩放、扭曲等动态属性。渐变就不用说了，让色带呈现自然过渡的工具。而溢出属性能够将大量杂乱元素塞入一个整洁的包中，用来创建一些有趣的形状。

以上这些名词听上去好像跟你用PS或AI等软件时用的也一样一样，只不过在这里，所有的参数都是Diana从键盘上输入一个个数值调试出来的，她甚至饶有兴致地给我们展示了一下属性使用不当会导致的“灾难”。

下面五张分别是缺失边界半径的Francine、缺失盒子阴影的Francine、缺失动态的Francine、缺失渐变的Francine和缺失溢出的Francine，

在接受css-tricks网站的采访时，Diana提到，自己每天的工作大多数都是围绕JavaScript展开的，这种语言有着冗长而又复杂的各种限制。

相比较而言，使用html CSS成了一件超高效而又简洁的事，它能够在限制很少的情况下达成一些效果，你用着用着忍不住觉得自己是个技术大师，也就完全不吝啬花上几千行去画个画啊啥的了。

不仅这位创作者本人从中得到了无限变形的乐趣，就连看图片的人，也可以创造性地观看它们，还是以Francine为例，这张图片如果放在不同版本的浏览器里，是能够创造出 win 98中它是这样的：

Vox网站产品团队成员Guillermo Esteves 在运行Windows 7的计算机上，用从6.0一直到11.0的IE版本分别查看了她，基本上是这样式儿的，是不是有点荷兰风格派运动De Stijl的感觉：

Chrome 9是野兽派：

老版本Opera上则有点分离派的晃眼睛：

在Mac上使用IE 5.1.7使得这场抽象变形大赛达到了极致：

当然，如果有条件，你还可以用不同的浏览器来运行看看，她能有啥奇妙变化，前提是需要置入这幅画的源代码网页（可以去Diana的GitHub页面找到），像本文中已经转换成普遍的图片格式，那就变不出来了。