蒙德里安以其绘画作品而闻名,这些作品使用粗黑线条形成网格,每个单元格为白色、红色、黄色或蓝色。这种美学与众所周知的矩形网页相得益彰,多年来 CSS 开发人员也注意到了这一点。前几天我看到一些用 CSS 绘制的蒙德里安艺术,于是想起了过去几年见过的其他作品,并决定将它们收集起来。
如果蒙德里安使用 CSS 而不是颜料会怎样?
Vasilis van Gemert许多人尝试用 CSS 重现蒙德里安的作品。这似乎是一项不错且简单的练习:CSS 可以轻松创建矩形,现在有了网格,也可以轻松地重现他的大部分作品。我也尝试过,结果比我想象的要复杂一些。而且结果,嗯,令人惊讶。

CSS 网格中的蒙德里安艺术
Jen Simmons 实验室我喜欢 Jen 如何在这方面做得更进一步,添加了纹理。与大多数示例一样,CSS 网格 被大量使用。

var t;
:皮特·蒙德里安
Jen Schiffer我从蒙德里安开始,不是因为他是我最喜欢的艺术家(他不是),也不是因为他的作品非常容易辨认(确实如此),而是因为我认为这将是一个有趣的(是的)且简单的项目开始(哈哈,不)。

用代码创作你自己的蒙德里安风格绘画
Riley WongGitHub 上有一个12 步教程。
Adam Fuhrer
CSS 蒙德里安
使用 CSS 网格生成皮特·蒙德里安风格的艺术。

CSS 蒙德里安网格
John Broers
几年前,CSS 刚出来的时候我就做过这个!
https://codepen.io/ciampo/full/xqddJZ
我将包豪斯风格的 CSS 字体 https://davorsuljic.github.io/css-fluid-grid-font.html 与我对蒙德里安艺术的理解结合起来。
悬停以动画 - 仅在 Firefox 中!