HTML不仅仅是编程语言的一种，而是一种能够被大佬玩到极致的技艺。
一般的前端开发者，使用HTML和CSS制作网页，虽然元素简单，但工具却丰富多彩。
然而，那些大佬级别的开发者，却能在HTML和CSS的世界中用绘画的方式创造出令人惊叹的作品，全程无需依赖PS、I等图形化图片编辑器，凭借着纯手工敲击代码的方式，将每一行代码都化作精美的图案。
当你把这些代码转化为现实后，你会发现他们竟然能够画出如此鲜活的水果：洛可可风格的古典女性肖像画，弗拉芒巴洛克风格的人物画像，甚至还有现代的粉色灯光下穿着礼服的少女：复古风人物海报：曲线、光影、渐变，每一个元素都充满了复杂与精致。
而且，在他们的创作过程中，几乎没有用到SVG这种图形化工具，仅仅凭借着tom文本编辑器和Chrome开发者工具进行创作。
也就是说，画面上的每一条曲线和渐变、每一处高光和阴影、每一根头发和睫毛、每一片蕾丝和褶皱，都是通过一行行代码一点一滴敲出来的！
如此精细程度和创造力，让学美术的网友感叹“学画画不如写代码”，也让编程专业的人士觉得“别人写得这么艺术，一定是我的教科书打开方式不对”。
这就是真正的交叉学科大佬！
这个项目曾一度登上GitHub Trending排行榜第二名，在Issues中得到了众多用户的膜拜：厉害！崇拜！太棒了！
绘制过程中，Diana在专门讨论CSS的网站CSS-Tricks上写下了详细的教程。那么，怎样用CSS画出这样一张图片呢？
如果不使用CSS，我们可能就直接嵌入这个特殊的图形了。但如果使用CSS，那么我们从黑色矩形开始，然后在两侧加上两个与白色背景颜色匹配的边框半径元素。
先画出一个黑色矩形，然后两边用圆弧遮挡，有了基础形状后，接下来就是给它添上渐变的背景。
但是，如果你用矩形方式填充，得到的效果可能就是这样的：Diana的做法是：在保留矩形的同时，加上两个弯曲的div，把凹进去的部分也填充上。
最后完整的代码是这样的（以下为伪代码）：
div {
width: 5px;
height: 5px;
background-color: #1e5799;
position: relative;
}
::after, ::before {
width: 100%;
height: 1%;
position: absolute;
top: 0;
z-index: -1;
content: "";
background-color: #7db9e8;
}
::after {
border-radius: 50% 50% 0% 0%;
right: 50%;
bottom: 50%;
}
::before {
border-radius: 50% 50% 0% 0%;
left: 50%;
top: 50%;
}
你还可以在这里查看CSS样式的实际运行效果：https://codepen.io/jean-jordan/pen/KeKaBw
下面，让我们回到人像画上，看看Diana是如何绘制人物的脖子的。
在上面这张图里，我们看到了Diana如何逐步改形状，最终得到了油画中人物的脖子。但是，仅仅会画各种几何形状是不足以生成艺术品的，Diana在这里总结了她在绘图中的5个重要CSS属性：
-
边界半径（border-radius）：边界半径是为了让矩形的边角过渡得更自然，对于大多数网页开发者来说，只需一个参数border-radius，可以设定不同的半径数值。
-
盒子阴影（box-shadow）：对多个盒子阴影进行分层是增加深度的最佳方法之一。框阴影将粘附到HTML容器的边缘，也会沿着边界半径定义的边缘。
-
变形（transform）：变形的主要方式有：旋转（rotate）、缩放（scale）和倾斜（skew）。此外还有透视，让物体产生远小近大的视觉效果，或者是仅为了绘制出一个梯形。
-
线性梯度（linear-gradient）和径向梯度（radial-gradient）：线性梯度用于定义一个方向上的渐变效果，径向梯度用于定义圆和椭圆形的渐变效果。
-
层叠（overflow）：层叠是一种将大量杂乱元素填充到一个整齐的包中的方法，可以创建一些有趣的形状。在变形那部分的基础上使用hidden参数，可以把边缘遮盖起来。
以上五种元素缺一不可，随便少一种都会产生怪异的效果。下面是Diana总结的各种属性效果的图片展示：
（此处插入多种CSS属性效果图片）
不过，由于这是一个纯个人艺术创作，所以它并不关心浏览器适配性。
因此，这些代码在Chrome里可以完美展现，但如果用其他浏览器打开，可能就会出现不一样的效果。
比如，我们在Mac上的Safari浏览器打开，妹子的眼睛就方了：肩膀上的高光，变成了一个大圈圈；胸前的礼服上，也被泼了一道墨水；如果用早期的Chrome打开，会出现惊悚的头身分离的效果；早期的Opera浏览器，打开之后脸又方了；Windows 7上从IE6到IE11，显示出来的都是这个鬼样子；浓重的线条，甚至有点抽象艺术的感觉。
同样是早期IE，放到Mac上也一样奇怪。这是IE 5.1的效果：还有人试过，在Windows 98系统的IE7浏览器打开，会变成这样。
其他的几张画也差不多。
最后，如果你在iPhone上装了Chrome，出来的也是Safari的效果。想看完整效果的话，请在安卓手机或电脑的Chrome上打开。
因此，有不少网友都觉得，这几幅画可以当成浏览器测试项目，一试就能知道内核用的是谁家的。
反向绘图：CSS太难，学不会？
不要紧，虽然我们不能把代码变成图片，但是可以把图片变成代码啊。没错，就是SCII艺术，早在DOS时期，就有人用命令行界面来显示图片。
直到今天，它已成为一种流行的互联网文化。
用单色字符来画出世界名画已经不算新鲜事。
最近又有个码农开发了一个新的项目Primg，让任何一幅画都可以用质数来表示。
比如蒙娜丽莎，就可以用一个万位的质数二进制方式绘制出来。
传送门：作者GitHub：https://githb.com/cyanharlow
作者博客主页：https://diana-adrianne.com/
教程：https://css-tricks.com/solving-lifes-problems-with-css/
用质数生成任意SCII艺术：https://githb.com/geonnave/primg
——完——
关注清华-青岛数据科学研究院官方微信公众平台“THU数据派”及姊妹号“数据派THU”获更多讲座福利及优质内容。