晓查 郭一璞 发自 凹非寺量子位 报告 | 公众号 QbitAIHTML不是编程语言，但这并不妨碍精通它的大佬玩出花招来。普通的前端，用HTML+CSS制作网页，元素简单，工具丰富。大佬级前端，用HTML+CSS绘画，全程不消PS、AI这种图形化的照片编辑器，单纯敲一行行代码纯手工绘制。 fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E) 把代码转换之后，就变成为了鲜嫩的果蔬：或画出洛可可风格的古典女性肖像：还有弗拉芒巴洛克肖像风格的名人画像，充满了中世纪的禁欲感：现代的亦有，例如这位在粉色灯光下的着礼服的妹子：以及充满着50年代气息的复古风名人海报：曲线、光影、渐变，每一个元素都相当繁杂。况且，创作过程中不消SVG，只用Atom文本编辑器和Chrome研发者工具。亦便是说，画面上的每一条曲线和渐变，每一处高光和暗影，每一根头发和睫毛，每一片蕾丝和褶皱，都是一行行代码从头敲出来的！如此精细程度和创造力，让学美术的网友感叹“学画画不如写代码”，让学计算机的朋友觉得“别人写的这么艺术，必定是我的教科书打开方式不对”。真·交叉学科大佬。这个项目亦一度登上了GitHub Trending排行榜第二名：
并且Issues里都是许多用户的膜拜：厉害！崇拜！太棒了！
它们的作者，是前端大神Diana Smith小姐姐，她日前是公司及软件研发商Atlassian的一名资深Web研发。
绘制过程Diana在专门讨论CSS的网站CSS-Tricks写下了仔细的教程。画出这般一个图形分成几步？倘若不消CSS，通常都是直接嵌入这个特殊的图形。倘若用CSS，那样就从黑色矩形起始，而后在两侧加上上两个与白色背景颜色匹配的边框半径元素。先画出一个黑色矩形，而后两边用圆弧遮挡。有了基本形状后，下一步便是给它添上渐变的背景。然则倘若用矩形方式填充，得到的效果便是这般的：Diana的办法是：在保存矩形的同期，加上两个弯曲的Div，把凹进去的部分亦填充上。最后完整的代码是这般的：div
{ width: 500px
; height: 350px
; bac公斤round: #000
; position
: relative;
&::after, &::before{ width: 20%
; height: 100%
; position
: absolute; top: 0
; z-index:2
; content: ""
; bac公斤round: #1e5799
; bac公斤round: -moz-linear-gradient
(top, #1e5799 0%, #7db9e8 100%); bac公斤round: -webkit-linear-gradient
(top, #1e5799 0%,#7db9e8 100%); bac公斤round: linear-gradient
(to bottom, #1e5799 0%,#7db9e8 100%); filter: progid XImageTransform.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
{ bac公斤round: #1e5799
; bac公斤round: -moz-linear-gradient
(top, #1e5799 0%, #7db9e8 100%); bac公斤round: -webkit-linear-gradient
(top, #1e5799 0%,#7db9e8 100%); bac公斤round: linear-gradient
(to bottom, #1e5799 0%,#7db9e8 100%); filter: progidXImageTransform.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）线性梯度用于定义一个方向上的渐变效果，径向梯度用于定义圆和椭圆形的渐变效果。bac公斤round-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浏览器打开，会变成非常像素风的样子：最恐怖的是三星手机上的夜间模式打开：连人种都变了啊！其他的几张画，换个浏览器打开亦比较鬼畜。拉夫领变得透明而有光泽，领口的蕾丝干脆断掉了，仿佛是逃难时期的肖像画。最后，倘若你在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
晓查 郭一璞 发自 凹非寺 量子位 报告 | 公众号 QbitAI
作者丨关注前沿科技系网易资讯·网易号“各有态度”签约作者本文观点不表率我方观点
·END· 往期精选内容举荐
| 
发表于 2024-6-29 15:57:41
