mundrian é conhecido por seu icônico estilo de pintura: linhas pretas ousadas formam uma grade e cada célula é preenchida com vermelho, amarelo, azul e branco. Essa estética minimalista complementa a estrutura retangular das páginas da web e atraiu desenvolvedores de CSS para tentar de várias maneiras ao longo dos anos. Recentemente, vi alguns trabalhos de estilo Mondrian criados com o CSS, então decidi coletar alguns casos excelentes que já vi no passado e compartilhá-los com você.

vasilis van gemert:

E se Mondrian usasse CSS em vez de pigmentos?

muitas pessoas tentam reproduzir o trabalho de Mondrian com o CSS. Parece um exercício simples e fácil: o CSS é fácil de criar retângulos e agora com uma grade, também é fácil reproduzir a maior parte de seu trabalho. Eu tentei, e acabou sendo um pouco mais complicado do que eu pensava. E o resultado, bem, é surpreendente.

Jen Simmons Lab:

arte Mondrian baseada na grade CSS

Gosto dos detalhes da textura que Jen adicionou ao trabalho. Como a maioria dos exemplos, ela usa muito a grade CSS.

Jen Schiffer:

variável t: Pete Mondrian

escolhi Mondrian no começo não porque ele era meu artista favorito (ele não era), nem porque seu trabalho era fácil de reconhecer (era fácil de reconhecer), mas porque eu pensei que seria divertido (sim) e fácil de começar (haha, não).

riley wong:

Crie sua própria pintura de estilo mondriano com código

Há um tutorial de 12 etapas no GitHub.

Adam Fuhrer:

css mondrian

Peter Mondrian Style Art gerado usando a grade CSS.

John Broers:

O trabalho de Mondrian baseado no CSS Grid