晓查 郭一璞 发自 凹非寺量子位 报告 | 公众号 QbitAIHTML不是编程语言,但这并不妨碍精通它的大佬玩出花招来。普通的前端,用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
; 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: progidXImageTransform.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· 往期精选内容举荐
|