HTML不是编程语言,但这并不妨碍精通它的大佬玩出花来。
普通的前端,用HTML+CSS制作网页,元素简单,工具丰富。
大佬级前端,用HTML+CSS绘画,全程不用PS、AI这种图形化的图片编辑器,单纯敲一行行代码纯手工绘制。
把代码转换之后,就变成了鲜嫩的水果:
或者画出洛可可风格的古典女性肖像:
还有弗拉芒巴洛克肖像风格的人物画像,充满了中世纪的禁欲感:
现代的也有,比如这位在粉色灯光下的着礼服的妹子:
以及充满者50年代气息的复古风人物海报:
曲线、光影、渐变,每个元素都相当复杂。
而且,创作过程中不用SVG,只用Atom文本编辑器和Chrome开发者工具。
也就是说,画面上的每一条曲线和渐变、每一处高光和阴影、每一根头发和睫毛、每一片蕾丝和褶皱,都是一行行代码从头敲出来的!
如此精细程度和创造力,让学美术的网友感叹“学画画不如写代码”,让学计算机的同学觉得“别人写的这么艺术,一定是我的教科书打开方式不对”。
真·交叉学科大佬。
这个项目也一度登上了GitHub Trending排行榜第二名:
并且Issues里都是诸多用户的膜拜:厉害!崇拜!太棒了!
它们的作者,是湾区前端大神Diana Smith小姐姐,她目前是企业及软件开发商Atlassian的一名资深Web开发。
绘制过程
Diana在专门讨论CSS的网站CSS-Tricks写下了详细的教程。
画出这样一个图形分成几步?
如果不用CSS,一般都是直接嵌入这个特殊的图形。
如果用CSS,那么就从黑色矩形开始,然后在两侧加上上两个
与白色背景颜色匹配的边框半径元素。
先画出一个黑色矩形