本文经AI新媒体量子位授权转载（公众号ID：QbitAI），转载请联系出处。HTML不是编程语言，但这并不妨碍精通它的高手玩起来。普通前端，使用HTML+CSS制作网页，元素简单，工具丰富。大师级前端使用HTML+CSS绘制，全程不使用PS、AI等图形图像编辑器。它是纯手绘的，只需键入几行代码即可。转码后变成鲜嫩的水果：或者画洛可可风格的古典女性肖像画：也有佛兰芒巴洛克风格的肖像画，充满中世纪的禁欲感：也有现代的，比如这个穿裙子的女孩粉色灯光下：以及充满50年代感觉的复古风格人物海报：曲线、光影、渐变，每一个元素都相当复杂。此外，在创作过程中没有使用SVG，仅使用了Atom文本编辑器和Chrome开发人员工具。也就是说，屏幕上的每一条曲线和渐变，每一个高光和阴影，每一根头发和睫毛，每一片花边和褶皱，都是从零开始编码的！这样的精致度和创意让学美术的网友感叹“学画画不如写代码”，让学计算机的同学感叹“别人写的这么有艺术感，一定是因为我的课本是以错误的方式打开”。真正的跨学科大师。他们的作者是湾区的前端大师DianaSmith女士。她目前是Atlassian的高级Web开发人员，是一名企业和软件开发人员。绘画过程Diana在CSS-Tricks这个专门介绍CSS的网站上写了一篇详细的教程。画这样一张图需要多少步？如果不使用CSS，通常会直接嵌入这种特殊图形。使用CSS，从一个黑色矩形开始，然后在两侧添加两个与白色背景颜色匹配的border-radius元素。先画一个黑色的长方形，然后两边用圆弧挡住。基本形状就位后，下一步是为其添加渐变背景。但是如果用矩形填充的话，效果是这样的：戴安娜的方法是：在保留矩形的同时，添加两个弯曲的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,#1e57990%,#7db9e8100%);background:-webkit-linear-gradient(顶部,#1e57990%,#7db9e8100%);背景:线性渐变(tobottom,#1e57990%,#7db9e8100%);过滤器:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799',endColorstr='#7db9e8',GradientType=0);}&::after{border-radius:100%0%0%100%;right:0;}&::before{border-radius:0100%100%0;left:0;}}body{background:#1e5799;background:-moz-linear-gradient(top,#1e57990%,#7db9e8100%);background:-webkit-linear-gradient(top,#1e57990%,#7db9e8100%);背景:linear-gradient(tobottom,#1e57990%,#7db9e8100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799',endColorstr='#7db9e8',GradientType=0);}你也可以去至此完成查看CSS样式的实际运行效果：https://codepen.io/jean-jordan/pen/KeKaBw刚刚画的那个人像不像人的脖子？好吧，让我们回到肖像画。戴安娜以类似的过程画出角色的脖子。在上图中，我们看到了戴安娜是如何逐渐变换造型，最终得到油画人物的脖子的。然而，仅仅通过绘制各种几何形状是不可能生成艺术品的。Diana总结了她在绘图中的5个重要CSS属性。1.边框半径（border-radius）边框半径是为了让矩形的角的过渡更加自然。对于大多数Web开发者来说，只需要一个参数border-radius就可以设置不同的半径值。边框半径：15px10px40px30px/40px10px15px30px；2.Box-shadow叠加多个box-shadows是增加深度的最好方法之一。box-shadow会贴在html容器的边缘，也会沿着border-radius定义的边缘。框阴影：6px-11px20px1pxred，-15px-15px5px-10pxblue，inset5px5px35px10pxgreen；开发人员可以指定模糊半径以及阴影是向内还是向外延伸。3、变换的主要方法有：旋转、缩放和倾斜transform:rotate(-45deg)transform:scale(0.7,1.3)transform:skew(25deg,30deg);另外还有透视，可以让物体产生远近小的视觉效果，或者只是画一个梯形。变换：透视（10px）旋转Y（5deg）；4.线性渐变（linear-gradient）和径向渐变（radial-gradient）线性渐变用于定义一个方向的渐变效果，径向渐变用于定义圆形和椭圆形渐变效果background-image:linear-gradient(0deg,blue,transparent60%),radial-gradient(circleat70%30%,purple,transparent40%);5.Cascading（溢出）Cascading是一种通过填充大量杂乱元素的方式，将一些有趣的形状创建成一个整齐的包。在变形部分的基础上使用隐藏参数来覆盖边缘。溢出：隐藏；以上五个要素缺一不可，缺了一个都会产生怪异的效果。△从左到右，缺少了边框半径、阴影、变形、渐变、层叠效果（点击查看大图），但即便如此，依然有抽象艺术的美感，仿佛在看毕加索的作品.仅适用于Chrome不过，由于这纯属个人艺术创作，戴安娜女士并不关心浏览器的兼容性。因此，这些代码在Chrome中可以完美显示，但如果在其他浏览器中打开，效果可能会有所不同。比如打开MAC上的Safari浏览器，女孩的眼睛是方的：肩膀上的高光变成了一个大圆圈；胸前的裙子也被泼了墨：如果用早期的Chrome打开，会有恐怖的头身分离效果：早期的Opera浏览器，打开后脸是方的：从IE6到IE11onWindows7、展示出来的就是这个鬼样子：粗粗的线条，甚至有点抽象艺术的感觉。也是早期的IE，在Mac上也是一样的鬼。这是IE5.1.7的效果：有人试过，在Windows98系统的IE7浏览器中打开会变成很像素化的样子：最恐怖最重要的是夜间模式开了三星手机开机：连种族都变了！其他几幅画在另一个浏览器中打开相当幽灵。姑娘，你文胸的钢圈要出来了！荷叶领变得透明闪亮，领口的花边简直是断了，仿佛是逃亡时的肖像。最后，如果你的iPhone上安装了Chrome，那么Safari的效果也会显示出来。如果你想看到完整的效果，请在你的安卓手机或电脑上用Chrome打开它。所以很多网友觉得这些图片可以作为浏览器的测试项目，试一试就知道用的是谁的内核了。反向绘制CSS太难学？没关系，虽然我们不能把代码变成图片，但是我们可以把图片变成代码。没错，ASCII艺术，早在DOS时代，就有人使用命令行界面显示图片。直到今天，它已经成为一种流行的网络文化。用单色人物画世界名画并不新鲜。最近，另一位程序员开发了一个新项目Primg，它可以让任何一幅画都用质数来表示。例如，蒙娜丽莎可以用30,000位素数以二进制形式绘制。传送门：作者的GitHub：https://github.com/cyanharlow作者博客主页：https://diana-adrianne.com/教程：https://css-tricks.com/solving-lifes-problems-with-css/用质数生成任意ASCII艺术：https://github.com/geonnave/primg
