|
代码变油画，精细到毛发，这个前端小姐姐只用 HTML+CSS，让美术设计也惊叹丨 GitHub 热榜 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:///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:/// 教程： https:///solving-lifes-problems-with-css/ 用质数生成任意 ASCII 艺术： https://github.com/geonnave/primg 作者系网易新闻 · 网易号 ' 各有态度 ' 签约作者 — 完 — |
|
|
来自： 恰恰365 > 《1.0娱乐 文化 自然》
