CSS作图（二），纯CSS代码画出精致逼真的图像，学起来啊

SS的强大和精妙，只有在认真研读其代码之后才会深刻明白。

今日继续用纯CSS画图，并给大家整理了本文中所有代码，需要的小伙伴可以私信我哦。

一、阴阳

首先，用CSS画一个阴阳图，如下：

代码也很简单：

#yin-yang {
 width: 96px;
 height: 48px;
 background: #eee;
 border-color: red;
 border-style: solid;
 border-width: 2px 2px 50px 2px;
 border-radius: 100%;
 position: relative;
}
 
#yin-yang:before {
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 background: #eee;
 border: 18px solid red;
 border-radius: 100%;
 width: 12px;
 height: 12px;
}
 
#yin-yang:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 background: red;
 border: 18px solid #eee;
 border-radius:100%;
 width: 12px;
 height: 12px;
}

当然，颜色什么的，可以随便改啦~

二、鸡蛋

再画一个可爱的鸡蛋~~~像这样：

代码仅仅几句话：

#egg {
 display:block;
 width: 126px;
 height: 180px;
 background-color: red;
 -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

三、最后画一个弯弯的月亮~

长这样：

代码非常非常少：

#moon {

width: 80px;

height: 80px;

border-radius: 50%;

box-shadow: 15px 15px 0 0 red;

}

是不是很神奇？不敢相信这几句代码居然有这样的功力？

那就打开电脑，按照我之前讲的方法创建一个html试试吧~

不知道怎么创建的小伙伴看这里>>css3制作图形大全：简单几句代码画出漂亮的图形，一起来看看吧~

码来做艺术？

本文授权转载于：AppSo

ID：AppSo

作者：冷思真

编辑：亦夕

艺术家的作品大多有点高深，除非是写实类作品，不然你不一定能「看懂」。

而代码对大多数人来说也是艰难的。对非专业人士来说，代码可能比艺术品还要复杂。那么，如果用代码来搞艺术创作，这一切会更简单吗？

01

不会画画的程序员不是好艺术家

《索思沃尔德的夜晚》是一幅安静的图画。即将西下的太阳光撒在湖面上，湖上波光粼粼，泛着金光，波浪的涟漪一点点的散开。岸上的建筑物则安然有序，灯塔、围墙、小房子，组成了这幅安静的风景图。

有人觉得这幅画看上去冷清，过于安静，是一幅悲伤的画。

有人觉得这幅画阳光照耀四方，小屋整齐的立在一旁，是一幅和谐又温暖的风景画。

当然，如果这些人知道这幅画是用代码画的，可能就只会说这是一幅很漂亮的画了。毕竟代码听上去就和艺术无关，和情感表达无缘。

此画的作者本·埃文斯是一个网页设计师，是一个前端开发，也是一个插画家。《索思沃尔德的夜晚》是他用层叠样式表（CSS）画的一幅作品。除了这幅画，他还用 CSS 画过大海，画过扑克牌。

和他一样使用 CSS 画画的人也不止一个，近些年还有越来越多的趋势。

自由网络开发者克里斯·帕特尔画的辛普森一家是前些年的作品，只是近来才开始被人注意。在 GitHub 上，你可以轻易找到创作者的代码，并在它的基础上进行更改。

当你复制原作者的代码，再稍以修改后，你就可以画出属于自己的辛普森。你还可以给他变色，让他从透明变成黄色、蓝色、绿色。

在 CSS 作图这个领域，数字艺术家戴安娜·史密斯则是一个不可忽略的先驱人物，他以 CSS 的巴洛克风格作画而闻名，创作过多幅 18 世纪复古风格的作品，也画过现实向的静物海报。

史密斯的作品从来不使用绘图软件，他只用手写的 HTML / CSS代码创建精美的图片。作为一个每天 90% 的工作都围绕着 JavaScript 工作的程序员，史密斯却更喜欢 CSS 作画，因为 CSS 有一些限制的规则。

这只是我喜欢 CSS 的众多原因之一。
有限的规则正是它的乐趣所在，你不会期望 CSS 能满足你所有的需求。这就是为什么当你在 CSS 最终找到了一种（可以满足你的）方法时，它就会变得更有价值。

在工作之余，史密斯还会不断回到 CSS 寻找艺术灵感，在限制之中创作新的艺术作品。

因为一些关于这些限制的东西一直在召唤着我。当我在说严格的限制是激发创造力的最佳催化剂时，我并不孤单。因为完全的艺术创作自由可能是一个令人麻痹的概念。

02

CSS 艺术，让每个浏览器都有自己的风格

值得一提的是，有限制的 CSS 图画不是一个完全静态的艺术作品。不管是简单的辛普森一家头像画还是精致的巴洛克肖像画、风景画，他们都是会变化的。每个人可以通过改变开源的代码来创作出自己的 CSS 图画。

在此之外，选择不同的浏览器打开图像也会呈现不同的作品。作为实时呈现的图画，每个浏览器在加载页面时都会将图画的代码呈现为绘图。

而大多数的数字艺术家都是在 Chrome 浏览器上处理代码的。所以除了 Chrome 浏览器能够呈现图片本身预想的画作外，其它浏览器都会「画」出不同的图像。这也展示了不同浏览器转换工作的差别。

创作者说不考虑图画的兼容性问题，反而更有意思。

由于这个项目的艺术性原因，我并不关心跨浏览器的兼容性，所以实时预览可能在除 Chrome 之外的任何浏览器中看起来都很可笑。

适配单一浏览器也有惊喜。当我们将这些代码放进不同浏览器的时候，有的图像有了出乎意料的变化。

Chrome 浏览器在羽毛和发丝的转换上非常细致，展现了本身的细节，Safari 浏览器则在部分高光的处理上有点过火，裙子也多了一条竖线。

左为 Chrome 浏览器呈现效果，右为 Safari 浏览器呈现效果

不过随着时间往前移，我们用更多版本的浏览器配上 CSS 代码图画时，呈现效果就会更特别。

这幅画本尊是这样的：

在 Safari 浏览器中，蕾丝的花边装饰直接盖在了女人的脸上，看不出原图。

在 2014 版本的 Opera 浏览器中，画作有了一种全然不同的风格。

脖子分成了三个部分，眉毛、头发、眼睫毛的位置都出现了偏移和错位，更条码式。

而 Edge 浏览器则自动消掉了画作的棱角，使整幅图画更为平滑、阴沉。

最后在上古时期的网景浏览器中，这位女士的嘴巴、眼睛等五官都变成了不同大小的方块，有点乐高的感觉，风格独树一帜。

作为该领域的先驱人物，史密斯给这些图画的表现赋予了更多的意义：

当你在不同的浏览器上查看这张图片时，你就像是在查看互联网的历史，以及当时用户对浏览器的要求。

03

CSS 画出来的画算艺术吗？更像行为艺术

代码是冰冷的、理性的代表，它是没有感情的。而画作的艺术则能表达作者丰沛的情感和思想。但当理性的代码用来创作感性的画作时，这一切会改变吗？

在一部分人看来，数字艺术是不能算作真正的艺术的。

当大片空白可以在瞬息间充满五彩的色块，渲染过度也能在强大工具的帮助下变得快捷且自然时，人们认为这不再是艺术了。虽然数字化工具做的画也可以很漂亮，很有创意，但人们会觉得它没有「灵魂」。即使它能模仿油画、水墨等不同风格，但创造出的作品也称不上艺术。

这个问题甚至可以上升到「代码是不是艺术」的问题上，深入讨论一下艺术的定义和内涵。

在主流观念中来，那些使用新工具去创作艺术作品的人不算正统艺术家。即便要称为艺术家，也得在前面加上「数字」两个字。在大众的、观念中，数字艺术家和传统的艺术家泾渭分明，完全不同。即便这两种艺术家在显示生活中已经有了很多工作的交织、身份的重合。

对当下的数字时代而言，随着互联网在我们生活中的渗透程度越来越深。每个人可能都会成为数字艺术家，在创作的过程中，都需要数字工具的帮助。

而纯粹用数字工具画出的 CSS 作图在可玩性、趣味性上都强于普通的艺术作品。即使我们不把它看作一个艺术杰作，它也是一个互联网的行为艺术作品。

它让我们意识到自己生活在一个现实扭曲的文化泛滥时代，人与人之间很难获得一致的事实版本。

你看到的东西是由你的设备版本决定的，是和你选择的数字工具有关的。当我们看到的东西不一样的时候，我们创作的东西也是不一样的。

CSS 作画与其说是艺术，不如说它让我们看到了互联网的一种能力，一次进程，一段历史。

本文作者冷思真，首发于公众号「AppSo」（ID：AppSo），这是一个让你手机更好用的专业媒体，欢迎识别下方二维码进行关注

源：量子位
链接：https://mp.weixin.qq.com/s/IIWgNvqp0jxcD-J_CikV8w

HTML不是编程语言，但这并不妨碍精通它的大佬玩出花来。

普通的前端，用HTML+CSS制作网页，元素简单，工具丰富。

大佬级前端，用HTML+CSS绘画，全程不用PS、AI这种图形化的图片编辑器，单纯敲一行行代码纯手工绘制。

把代码转换之后，就变成了鲜嫩的水果：

或者画出洛可可风格的古典女性肖像：

还有弗拉芒巴洛克肖像风格的人物画像，充满了中世纪的禁欲感：

现代的也有，比如这位在粉色灯光下的着礼服的妹子：

以及充满者50年代气息的复古风人物海报：

曲线、光影、渐变，每个元素都相当复杂。

而且，创作过程中不用SVG，只用Atom文本编辑器和Chrome开发者工具。

也就是说，画面上的每一条曲线和渐变、每一处高光和阴影、每一根头发和睫毛、每一片蕾丝和褶皱，都是一行行代码从头敲出来的！

如此精细程度和创造力，让学美术的网友感叹“学画画不如写代码”，让学计算机的同学觉得“别人写的这么艺术，一定是我的教科书打开方式不对”。

真·交叉学科大佬。

这个项目也一度登上了GitHub Trending排行榜第二名：

并且Issues里都是诸多用户的膜拜：厉害！崇拜！太棒了！

它们的作者，是湾区前端大神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万位的质数二进制方式绘制出来。

在线咨询

上一篇：市住建局：购买车位查询业务将推行全流程网办
下一篇：最详细的html+css笔记（一）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商