外链论坛

 找回密码
 立即注册
搜索
查看: 102|回复: 4

代码变油画,前端小姐姐只用HTML+CSS就能做到,让美术设计亦惊叹丨GitHub热榜

[复制链接]

3022

主题

210

回帖

9777万

积分

论坛元老

Rank: 8Rank: 8

积分
97779036
发表于 2024-6-29 15:57:41 | 显示全部楼层 |阅读模式
晓查 郭一璞 发自 凹非寺量子位 报告 | 公众号 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

{

  width500px

;

  height350px

;

  bac公斤round#000

;

  position

: relative;

  &::after, &::before{

    width20%

;

    height100%

;    

    position

: absolute;

    top0

;

    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公斤roundlinear-gradient

(to bottom, #1e5799 0%,#7db9e8 100%); 

filter: progidXImageTransform.Microsoft.gradient( startColorstr=#1e5799, endColorstr=#7db9e8

,GradientType=0 ); 

  }

  &::after

{

    border-radius100% 0% 0% 100%

;   

    right0

;

  }

  &::before

{

    border-radius0 100% 100% 0

;   

    left0

;

  }   

}

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公斤roundlinear-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 blueinset 5px 5px 35px 10px green

;

研发能够指定模糊半径,以及暗影是向内延伸还是向外延伸。3、变形(transform)变形的重点方式有:旋转(rotate)、缩放(scale)和倾斜(skew)。transformrotate(-45deg

)

transformscale(0.7, 1.3

)

transformskew(25deg, 30deg

);

另外还有透视,让物体产生远小近大的视觉效果,是仅仅为画出一个梯形。transformperspective(10pxrotateY(5deg

);

4、线性梯度(linear-gradient)和径向梯度(radial-gradient)线性梯度用于定义一个方向上的渐变效果,径向梯度用于定义圆和椭圆形的渐变效果。bac公斤round-imagelinear-gradient(0degbluetransparent

 60%),

radial-gradient(circle at 70% 30%, purpletransparent

 40%);

5、层叠(overflow)层叠是一种将海量杂乱元素填充到一个整齐的包中的办法能够创建有些有趣的形状。在变形那部分的基本运用hidden参数,能够把边缘遮盖起来。overflowhidden

;

以上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·

往期精选内容举荐





上一篇:有哪些适合程序员运用的iOS软件能够进行手机端程序编写?
下一篇:有哪些好用的前端 css 样式手机编辑器能够举荐?
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-28 08:43:28 | 显示全部楼层
谷歌外链发布 http://www.fok120.com/
回复

使用道具 举报

3063

主题

2万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158953
发表于 2024-10-14 22:43:15 | 显示全部楼层
楼主节操掉了,还不快捡起来!
回复

使用道具 举报

3037

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109078
发表于 2024-10-27 07:33:13 | 显示全部楼层
百度seo优化论坛 http://www.fok120.com/
回复

使用道具 举报

2983

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109240
发表于 2024-11-5 20:35:46 | 显示全部楼层
太棒了、厉害、为你打call、点赞、非常精彩等。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-14 11:17 , Processed in 0.125764 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.