Baroque Portraits “Painted” Using Hand-Typed CSS Code
This “painting” by UI engineer Diana Smith may look like it was created using standard digital painting software, but in fact, it consists of nothing but hand-typed CSS (Cascading Style Sheet), the code that dictates how HTML elements on the web should be displayed.
Smith’s latest piece is called “Pure CSS Lace,” and it’s inspired by Flemish Baroque oil portraits. There’s definitely something suggestive of Vermeer to it, though of course, it’s lacking the rich textures of paint and brushstrokes found in the real thing, especially if we’re talking Flemish Baroque a la Rembrandt.
Smith didn’t invent CSS art, but she certainly elevated it. Using CSS is a fun way for coders to get creative, with results that are usually a lot simpler in detail. Smith says she enjoys the process and doesn’t mind that her methods are so time-consuming. She even sets certain rules for herself as she works, like the fact that all elements must be typed out by hand and only Atom text editor and Chrome Developer Tools are allowed.
The unconventional artist did a video interview with VICE providing a little more detail about how and why she works with this unusual medium. In it, she explains: “When I start out trying to create an image with CSS, what I’m ultimately trying to do is create something that does not look like it was created with CSS. The Francine image was originally inspired by a scene from the TV show American Dad. The 18th-century outfit just made me think of 18th-century art, and I just decided that would be an excellent concept to marry together. The cartoon influence and the old school influence.”
“Normally, when people might think of CSS art, they might think of something that’s kind of cartoonish, and I just wanted to see if it was possible to create something that you would look at and and not guess that it was created with CSS. You might just assume it was created with normal paint methods. I just wanted to see if it was possible to achieve that level of detail.”
In the video, Smith demonstrates how the code turns into these visual elements. As you can see, it literally requires coding every visible strand. Because you can fiddle with it in such fine detail, she says she often finds herself going back and adjusting past works continuously, never quite considering them complete.
One cool thing to note is that depending on what browser you use, CSS art can look drastically different. Details might be rendered in a way that looks warped in one browser, or strangely blocky and abstracted in another. It almost becomes its own sort of digital cubism. Smith jokes that it looks “interestingly awful.” The live preview is only meant to be viewed in Chrome, but you can also check it out at Github to see how different it looks from the image files if you’re using another browser (particularly an older one).
If you’re familiar with CSS and interested in trying out some art of your own, you can find an overview of the process over at Creative Bloq.