5 位代码艺术家用 CSS 绘制蒙德里安艺术

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费信用额度!

蒙德里安以其绘画作品而闻名,这些作品使用粗黑线条形成网格,每个单元格为白色、红色、黄色或蓝色。这种美学与众所周知的矩形网页相得益彰,多年来 CSS 开发人员也注意到了这一点。前几天我看到一些用 CSS 绘制的蒙德里安艺术,于是想起了过去几年见过的其他作品,并决定将它们收集起来。

Vasilis van Gemert
如果蒙德里安使用 CSS 而不是颜料会怎样?

许多人尝试用 CSS 重现蒙德里安的作品。这似乎是一项不错且简单的练习:CSS 可以轻松创建矩形,现在有了网格,也可以轻松地重现他的大部分作品。我也尝试过,结果比我想象的要复杂一些。而且结果,嗯,令人惊讶。

Screenshot of a webpage with a large serif font in various sizes reading What if Mondrian Used CSS instead of Paint? above two paragraphs discussing Mondrian Art in CSS.

Jen Simmons 实验室
CSS 网格中的蒙德里安艺术

我喜欢 Jen 如何在这方面做得更进一步,添加了纹理。与大多数示例一样,CSS 网格 被大量使用。

Mondrian Art in CSS Grid from Jen Simmons. Includes rough grungy texture across the entire piece.

Jen Schiffer
var t;:皮特·蒙德里安

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

Mondrian Art in CSS randomized 12 times in a 4 by 3 grid of boxes. A bright yellow header is above the grid bearing the site title: var t.

Riley Wong
用代码创作你自己的蒙德里安风格绘画

GitHub 上有一个12 步教程


Adam Fuhrer
CSS 蒙德里安

使用 CSS 网格生成皮特·蒙德里安风格的艺术。

Screenshot of a full page Mondrian art example. There is a refresh button centered at the bottom of the page.

John Broers
CSS 蒙德里安网格

An example of Mondrian Art in CSS with a "Generate New" option. The example is a square box with plenty of padding around it on the white background page.