代码变油画，精细到毛发，让美术设计也惊叹

来源：量子位

代码变油画，精细到毛发，这个前端小姐姐只用 HTML+CSS，让美术设计也惊叹丨 GitHub 热榜

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

（编辑：应用网_阳江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!