ai生成html(ai生脸)

ai生成html(ai生脸)

小小郭给了一个寺庙量子定位|公众号qbitai。

HTML不是编程语言，但不妨碍高手大玩。

普通前端，用HTML CSS做网页，元素简单，工具丰富。

山雀的前端使用HTML CSS进行绘制，不需要图形图像编辑器PS和AI，只需要敲门，手工绘制即可。

经过代码转换，就变成鲜果了：

或者画着洛可可风格的古典女性肖像：

还有一幅弗莱洛克的画像，充满了中世纪的禁令：

还有现代感，比如这个穿粉色光的女孩：

以及一张完整50年氛围的复古风格海报：

曲线，光影，渐变，每个元素都很复杂。

另外，创建过程中没有SVG，只使用了Atom文本编辑器和Chrome开发者工具。

也就是说屏幕上的每一个曲线和渐变，每一个突起和阴影，每一根头发和睫毛，每一条花边和褶皱，所有的代码都被消除了！

这种精细和创意，让学美术生的网友“学的比写代码还少”，让学计算机的觉得“别人写的美术，一定是我的课本打开法。”

真正的阅卷纪律。

它们的作者是湾区大戴安娜史密斯(Diana Smith)，她目前是一名商业和软件开发人员，阿斯特高级网络开发。

绘图过程

Diana在CSS网站的CSS-Tricks讨论中写了详细的教程。

画这样一个图把它分成几个步骤？

如果你没有CSS，一般都是嵌入在这个特殊的绘图里。

如果使用CSS，从一个黑色的矩形开始，然后两边加两个。

匹配白色背景颜色的边界半径元素。

首先是个矩形的图片，然后遮挡两边的圆弧。有了基本形状之后，下一步就是添加渐变背景。但是如果你以矩形的形式填充，结果是这样的：

戴安娜的方法是：在遮挡矩形时，添加两个弯曲的div，并填充凹槽。

的完整代码是这样的：

div { Width:500 px；高度：350px背景：# 000；位置：相对；& amp此后{宽度：20%；身高：；位置：；top:0；z指数：2；内容：背景：# # 1E5799背景：-moz-linear- gradient (top，#1e5799 0%%，# 7 db9e 8 %)；背景：-webkit-线性渐变(top，#1e5799 0%%，# 7 db9e 8 %)；背景：线性渐变(# #1e5799 0%%，# # 7 db9e 8 %)；filter:progid:dximagetransform . Microsoft . gradient(startcolorstr=' # 1e 5799 '，endcolorstr='#7db9e8 '，gradient type=0)；} & amp:3360 Ait {边界半径： 0% 0% ；右：0；} & amp:前{边界半径：0 0；左：0；}}}正文{背景：# # 1E5799背景：-moz-linear- gradient (top，#1e5799 0%%，# 7 db9e 8 %)；背景：-webkit-线性渐变(top，#1e5799 0%%，# 7 db9e 8 %)；背景：线性渐变(# #1e5799 0%%，# # 7 db9e 8 %)；filter:progid:dximagetransform . Microsoft . gradient(startcolorstr=' # 1e 5799 '，endcolorstr='#7db9e8 '，gradient type=0)；}您也可以通过以下方式完成CSS样式的实际操作：

https://codepen.io/jean-jordan/pen/kekabw

我们画的人像和人的脖子有区别吗？好了，让我们回到画像上。戴安娜的脖子也是类似的过程。

上图中，我们看到戴安娜逐渐改过自新，最终得到了油画中人物的脖子。

但它不能只通过绘制各种几何形状来生成艺术品。Diana总结了绘画中CSS的五个重要属性。

1、边界半径(boundary radius)

边界半径是过渡矩形的角。对于大多数Web开发人员来说，只有一个参数边界半径可以设置为不同的半径值。

半径：15px 10px 40px 30px/40px 15px 30px；2.方框阴影

将多个盒子阴影分层是增加深度的最好方法之一。方框阴影将粘附到HTML容器的边缘和沿边界半径定义的边缘。

盒子：6px -11px 20px 1px红色，-15px-15px-10px蓝色，插入5px 5px 35px 10px绿色。开发者可以指定模糊半径，阴影会向内或向外延伸。

3.变形(转变)

主要的变形方式有：旋转、缩放、倾斜(歪斜)。

变换：旋转(-45度)变换：缩放(0.7，1.3)变换

：偏斜（25deg，30deg）;

另外，存在透视，允许物体产生几乎接近的大视觉效果，或者只是绘制梯形。

变换：透视（10px）旋转（5deg）;

4，线性梯度（线性梯度）和径向梯度（径向梯度）

线性梯度用于在一个方向上限定梯度效果，并且径向梯度用于定义圆形和椭圆形梯度效果。

背景图像：线性梯度（0deg，蓝色，透明60％），径向梯度（圆圈为70％30％，紫色，透明40％）;

5，层压（溢出）

冲压是一种将大量凌乱元素填充到一个可以创建一些有趣形状的整洁包装中的方法。在变形的部分的基础上，使用隐藏参数覆盖边缘。

溢出：隐藏;

以上五个元素不是不能，并且一个人会有一个奇怪的效果。

△从左到右，它是缺少边界半径，阴影，变形，渐变，堆栈的结果（点击查看放大图像）

但即使是，它也是抽象艺术的美丽外观，好像它正在看毕加索。

只适铬

但是，因为这是一个纯粹的个人艺术创作，戴安娜小姐姐并不关心浏览器适应性。

因此，这些代码可以在Chrome中完善，但如果您与其他浏览器打开，则可能会产生不同的效果。

例如，MAC上的Safari浏览器打开，姐姐的眼睛只是：

肩膀上的亮点成为一个大圆圈：

在胸前，它也倒了墨水：

如果您与早期Chrome打开，您将有一个恐怖的标题效果：

早期歌剧浏览器，开幕后：

Windows 7从IE 6到IE 11，显示。

强烈的线条，甚有点抽象的感觉。

它也是同一个早期的IE，也是MAC上的鬼魂。这是IE 5.1.7的效果：

有些人试图尝试尝试，即在Windows 98系统中进行7个浏览器，它将变得非常像样式：

最可怕的是三星手机上的夜间模式：

即使是人们也发生了变化！

其他图片，将浏览器更改为打开和更多的幽灵动物。

姐姐正在胸罩出来！

拉斐带领透明且闪亮，颈部的蕾丝被简单地破碎，好像是逃脱时期的肖像。

，如果您在iPhone中安装了Chrome，则它也是Safari的效果。如果您想查看完整效果，请在Android手机或计算机上打开。

因此，许多网友觉得这些图片可以用作浏览器测试项目，我可以知道使用内核谁。

反向绘图

CSS太困难了，没有学习？虽然我们无法将代码转换为图片，但您可以将图片转换为代码。

对，是ASCII艺术早在DOS期间，有人使用令行界面来显示图片。直到今天，它已成为一个受欢迎的互联网文化。

绘制与单色字符的世界着名绘画并不是一件新的事情。最近，有一个新项目开发一个新项目。底让任何绘画都可以由数字表示。

例如，可以用20,000位二进制方法绘制Monradisa。

门户网站：

作者的github：https://githu网站站点" rel="nofollow" />