或许你早就听说过“ASCII艺术”这种说是代码创立的图片，即便没听说过这个名词也必定早就用过它。一点儿也不古怪，在还没有Emoji表情能够用的时代，你必定用过:-D、$_$、^(oo)^之类吧。用ASCII码直接生成图形便是这种艺术的基本形式，也有人会用它来做出很凌乱一点的像是一朵花、一只小熊什么的姿态，当然，我要贴出下面这种图你就会瞬间理解，哦——
真是的，相似玩意儿从小到大没少看过，也没啥好稀罕的了。
上一年七月份，微软的机器人小冰，在我国艺术家邱志杰的调教下，也以“夏语冰”的姓名出道，假结业展之名在中心美术学院美术馆举办了《或然国际 Alternative Worlds》著作展，在没有揭晓本相之前，人们纷繁认为那些较为熟练的画作出自一位18岁的天才少女之手。
有了上述储藏的你，估量在第一眼看到“代码作画”的时分，毫不认为然，觉得这很正常嘛，究竟有许多事例在先，但我要告知你的是，这次不相同，本文要介绍的这位作者是一位实在的生物学意义上的人类，并且是用手写办法写下几千行代码来完结质感极高的著作的，而不是上面ASCII码蒙娜丽莎那般的粗糙。话不多说，先上图。
这张广告招贴画似的生果，看上去尽管还没那么传神，但在光和颜色的变换上现已蛮丰厚的了，查了一下代码，运用了427行写就，每一行，都是那位叫做Diana Smith的小姐姐一个键一个键地敲出来的，看到这儿，是不是忽然有点肃然起敬？
小姐姐长这样，这是她在GitHub上的头像，我觉得挺美的，其实在身份是一位日子作业在湾区的UI工程师，也是一位在GitHub和Tweet上具有不少重视者的技能牛人。往常乐于在网上共享自己的Javascript开发和CSS开发经历，近来更由于共享了这组用代码和层叠款式表在html上显现的图片而引起了圈内的热议，像每个酷爱共享的程序猿相同，Diana不只po出了美美的相片，还挺翔实地给了一些攻略，提示想要仿效的人最该留意的一些坑。
生果之外的其他四张都是女人半身像，有现代的也有古代的，神态各异，一个个风姿绰约，从中也能够精确的看出小姐姐的艺术修养适当不错。
这四张图，源代码从几百到上千行不等，其间最新完结的是那张蕾丝花边黑礼衣的贵族妇人，叫做Pure CSS Lace，上一年11月中旬才上传，而那张水蓝色礼衣的金发女子叫做Pure CSS Francine，2018年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页面找到），像本文中现已转换成遍及的图片格式，那就变不出来了。
References
https:///2019/11/css-portraits-diana-smith
https://github.com/cyanharlow
https:///2018/5/3/17309078/digital-art-diana-a-smith-francine-coded-browser-art
https://designtaxi.com/news/403658/UI-Engineer-Behind-Popular-CSS-Paintings-Shows-You-How-To-Create-Your-Own
https://designtaxi.com/news/399479/Stunning-Paintings-Developed-Entirely-With-HTML-CSS-Left-The-Internet-In-Awe
https://diana-adrianne.com/how/?utm_campaign=DesignTAXI&utm_content=DesignTAXI&utm_medium=DesignTAXI&utm_source=DesignTAXI&utm_term=DesignTAXI
https://css-tricks.com/solving-lifes-problems-with-css/
本文经授权转载自
科学艺术研究中心
（ID：Art_And_Science）
修改：Dannis
