skillful coder diana smith creates baroque paintings with freehand CSS and HTML
 

skillful coder diana smith creates baroque paintings with freehand CSS and HTML

UI engineer diana smith creates baroque-inspired portraits using HTML and CSS. using these two hypertext markup languages — jargon for the coding that makes up what you see displayed on web browsers — smith creates every single element by hand. 

skillful coder diana smith creates baroque paintings with CSS and HTML

image courtesy of @modestmeows

 

 

smith‘s portraits, titled ‘pure CSS francine‘ and ‘pure CSS lace‘, are not images that can be saved to file but pure code created without libraries, shortcuts, or the use of another visual editor. that means that the portraits can look very different when viewed in different browsers – because of the different code-reading capabilities of each program. 

skillful coder diana smith creates baroque paintings with freehand CSS and HTML

loaded in firefox
image courtesy of @triptych

 

 

creating images with CSS involves writing code that will display an object in a browser and then manipulate its various properties, like size or color for example. what makes smith’s process so painstakingly time-consuming is that you can’t see what you are making, which means smith has to use trial-and-error.

skillful coder diana smith creates baroque paintings with freehand CSS and HTML

image courtesy of diana smith

 

 

the portrait titled ‘pure CSS lace’, which features a woman wearing a black dress complete with pearls and a lace colla, is made up of 1,968 lines of CSS code. a piece like this can take smith up to two weeks to create. the outcome is a pure CSS image made up of code that can be endlessly tweaked.

skillful coder diana smith creates baroque paintings with freehand CSS and HTML

in an old version of opera
image courtesy of @dz

 

project info

 

designer: diana smith
title: pure CSS lace / pure CSS francine

have something to add? share your thoughts in our comments section below.
all comments are reviewed for the purposes of moderation before publishing.

comments policy

PRODUCT LIBRARY

a diverse digital database that acts as a valuable guide in gaining insight and information about a product directly from the manufacturer, and serves as a rich reference point in developing a project or scheme.

technology news

×
keep up with our daily and weekly stories
507,247 subscribers
- see sample
- see sample
designboom magazine