点击上方“AI遇见机器学习”,选择“星标”公众号

重磅干货,第一时间送达

转自量子位

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 万位的质数二进制方式绘制出来。

传送门:

作者的 GitHub:
https://github.com/cyanharlow

作者博客主页:
https://diana-adrianne.com/

教程:
https://css-tricks.com/solving-lifes-problems-with-css/

用质数生成任意 ASCII 艺术:
https://github.com/geonnave/primg

欢迎关注我们,看通俗干货!

GitHub 热榜:歪果小姐姐教你用纯代码画画,真细腻!相关推荐

  1. 歪果小姐姐教你用代码画画,真大佬!

    转自:量子位(ID:QbitAI) 虽然 HTML 不是编程语言,但这并不妨碍精通它的大佬玩出花来. 普通的前端,用 HTML+CSS 制作网页,元素简单,工具丰富. 大佬级前端,用 HTML+CSS ...

  2. GitHub趋势榜第一:小姐姐自拍,生成二次元萌妹子

    栗子 发自 凹非寺 量子位 报道 | 公众号 QbitAI 如何能让一个小姐姐属于你? 把她变成二次元的人类,就可以解锁一个老婆了. 韩国游戏公司NCSOFT,最近开源了一只技艺精湛的AI. 只要任意 ...

  3. GitHub 热榜:一个能将文本快速转化为代码的 Python 神器!

    " 阅读本文大概需要 3 分钟. " 如果能创建一个桌面软件,将自然语言直接转换成相关的 Python 数据分析代码,工作就方便了. 这不,有俩「好事」的程序员耐不住寂寞,把这个工 ...

  4. GitHub热榜第一:中国博士用 ArcGIS Dashboard开发可交互全球疫情地图,登上《柳叶刀》!...

    点上方蓝字计算机视觉联盟获取更多干货 在右上方 ··· 设为星标 ★,与你不见不散 编辑:Sophia 计算机视觉联盟  报道  | 公众号 CVLianMeng AI博士笔记系列推荐: 博士笔记 | ...

  5. GitHub 热榜:中国博士开发可交互全球疫情地图,登上柳叶刀!

    点击上方"视学算法",选择"星标"公众号 重磅干货,第一时间送达 转自量子位,作者郭一璞 一个多月前,当你被困在家里无法出门的时候,可能每天早上第一件事就是看看 ...

  6. 谷歌ALBERT模型V2+中文版来了:之前刷新NLP各大基准,现在GitHub热榜第二

    点击上方"AI遇见机器学习",选择"星标"公众号 重磅干货,第一时间送达 作者:十三.发自.凹非寺 转自:量子位(QbitAI),未经允许不得二次转载 比BER ...

  7. 男神青涩时纤毫毕现!腾讯AI模型GFPGAN火上GitHub热榜第一,Demo在线可玩

    包浆老图立刻清晰到头发丝是一种怎样的体验? 看这明亮的眼眸.清晰的发丝,原本模糊的人像立刻添了几分灵动: (这就是用AI修复的高圆圆童年照) 时间更久远的历史名人照片也能搞定. 鲁迅先生年轻时意气风发 ...

  8. 女神青涩时纤毫毕现!腾讯AI模型GFPGAN火上GitHub热榜第一,Demo在线可玩

    明敏 发自 凹非寺 量子位 报道 | 公众号 QbitAI 包浆老图立刻清晰到头发丝是一种怎样的体验? 看这明亮的眼眸.清晰的发丝,原本模糊的人像立刻添了几分灵动: (这就是用AI修复的高圆圆童年照) ...

  9. 刷个B站的功夫就能把Python学了,微软放出短视频入门课,资料登上GitHub热榜第一...

    乾明 发自 凹非寺  量子位 报道 | 公众号 QbitAI 微软,正在用力拥抱Python. 继Windows官方商店中加入了Python 3.7,支持一键安装Python之后. 这一不断为开源世界 ...

最新文章

  1. PennyLane | 用于量子计算机可微分编程的跨平台Python库
  2. UIPasteboard 粘贴板
  3. USACO1.1Broken Necklace[环状DP作死]
  4. ML 自学者周刊:第 4 期
  5. [ActionScript 3.0] AS3.0 下雨及涟漪效果
  6. webviewjavascriptbridge android ios,js与ios交互使用WebViewJavascriptBridge如何写多个函数
  7. zabbix历史数据mysql_处理Zabbixl历史数据库解决办法三---使用MySQL中间件为Zabbix数据库扩容...
  8. 华为与万达签订5G战略合作协议 推动5G商业场景应用
  9. 苹果手机怎么编程c语言,C语言编程ios版下载_C语言编程苹果版
  10. vnc远程控制软件配置,vnc远程控制软件怎么配置的,教程详解
  11. 免费统计微信复制//打开/咨询/下载/表单按钮点击统计工具-好多粉
  12. A. 拼音魔法 大学生程序设计邀请赛(华东师范大学)
  13. 2022-2028年中国危化品运输行业市场深度分析及投资规模预测报告
  14. H264编码基本原理(一)
  15. 236767服务器网站,南京前三的FIL服务器网站
  16. (C语言)啥?4除以2等于0?
  17. python drf_python DRF操作流程
  18. 一文看懂VPS、原生IP、住宅IP有什么不同
  19. 详解数据架构的七类视图(多图+案例)
  20. 有哪些常见的游戏建模软件?游戏建模师的工作日常

热门文章

  1. 安卓开源项目周报0411
  2. php前端传过来的json数据丢失 (max_input_vars)
  3. 单例模式——创建型模式
  4. 从共享租车成绿色消费首选,看共享经济未来
  5. 06-Windows Server 2012 新特性 ---- Hyper-V实时迁移
  6. python 学习笔记 运算符优先级(8)
  7. Sqlserver 2000 迷你、便携企业管理器(10M),支持Dts编辑
  8. ×××论坛应该为访问者更大的价值
  9. 学好C++十大良好的习惯
  10. QuickPart : 用户控件包装器 for SharePoint 2007