Diana Smith makes web images unlike any you’ve probably seen before. That’s because when you’re looking at one of the user interface designer’s creations, you’re not looking at flat pixel data fetched from a server—you’re looking at pure code, rendered live before your very eyes.
Smith’s “Pure CSS Francine,” an elaborate code-drawing in the style of an 1800s oil painting, caused web developers on Twitter to have a meltdown this week. The work was not drawn with a tablet, or a mouse, or even using illustration software. Instead, Smith coded every element by hand in HTML and CSS, computer languages that tell your browser how to display web pages. This means that there is no “image” to save as a file when you view Pure CSS Francine on the web, but you can screenshot it or download the code and play around with it yourself.
Videos by VICE
This makes Pure CSS Francine, and Smith’s other CSS images—like this awesome midcentury-style ad—really unique pieces of art. Because it’s made of code that’s telling a browser to do something, Francine can look very different when viewed in different browsers. When rendered in Netscape Navigator, for example, Francine morphs into a cubist masterpiece.
In an old version of Opera… Well, I don’t really know enough about art to say what it looks like really but it is definitely interesting.
“These browsers that were made back in the day, they didn’t anticipate that people would be making CSS art—it was just the internet where information lives and all you need is some rectangles and maybe some colour,” Smith explained. “When you look at this image on different browsers, you’re kind of looking at the history of the internet and what was demanded of it at the time.”
“It’s like a mood ring,” she said of Pure CSS Francine’s shapeshifting nature.
Cascading style sheets (CSS) give your browser instructions on how to display a given web page, and it turns out that you can do some pretty incredible stuff if you’re as talented and dedicated as Smith. Creating images with CSS involves writing code that will display an object in a browser and then manipulate its size, edges (to create a circle), colour, and so on. Much like how vector illustration involves manipulating shapes and putting them together to create a final design, CSS image creation involves layering and arranging shapes. The big difference is that with CSS, you can’t always see what you’re making while you’re making it, and so it’s a bit of a process of trial-and-error, Smith said.
“I have to type out each element first, and then write a rule for each of those elements—it’s not as easy or quick as loading up the thing on the paintbrush,” Smith said. “Sometimes that prevents me from making something quite as detailed as I’d like, just because it takes extra time.”
“There’s no good reason other than fun, just because, and art”
There’s no paintbrush, no cursor, no easy inputs besides a keyboard. It’s like a video game’s ultra-hard “survival mode” but for digital art. “I’m not even really sure why I’m that way,” Smith said, explaining that a good challenge is what inspires her.
Smith said that it takes her roughly two weeks to create a pure CSS image, although her work is never really done since the code that makes up the image can be tweaked endlessly. It’s worth noting that there are plenty of CSS images out there, but what makes Smith’s work stand out is its attention to aesthetics and visual appeal.
“I’ve heard that question a lot since I did this—like, why? There’s no good reason other than fun, just because, and art,” Smith told me, adding that she has no advantage over anyone else except for free time.
“A lot of people will tell you, if you’re trying to learn coding, find a free API and build a project out of it,” she continued. “It should be the same with CSS, because at that point you’re not doing anything for an employer, you’re just messing around with code, having fun with the process, and trying to challenge yourself. And this is a way of doing that.”
Get six of our favorite Motherboard stories every day by signing up for our newsletter .
More
From VICE
-
Collage by VICE -
Collage by VICE -
Collage by VICE -
An early eye scanner. (Photo by Ian Waldie/Getty Images)
