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.

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.

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.

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
    LOG IN
    designboom's comment policy guidelines
    generally speaking, if we publish something, it's because we're genuinely interested in the subject. we hope you'll share this interest and if you know even more about it, please share! our goal in the discussion threads is to have good conversation and we prefer constructive opinions. we and our readers have fun with entertaining ones. designboom welcomes alerts about typos, incorrect names, and the like.
    the correction is at the discretion of the post editor and may not happen immediately.

    what if you disagree with what we or another commenter has to say?
    let's hear it! but please understand that offensive, inappropriate, or just plain annoying comments may be deleted or shortened.

    - please do not make racist, sexist, anti-semitic, homophobic or otherwise offensive comments.
    - please don't personally insult the writers or your fellow commenters.
    - please avoid using offensive words, replacing a few letters with asterisks is not a valid workaround.
    - please don't include your website or e-mail address in your comments for the purpose of self-promotion.
    - please respect jury verdicts and do not discuss offensively on the competition results
    (there is only one fist prize, and designboom usually asks renown professionals to help us to promote talent.
    in addition to the awarded designs, we do feel that almost all deserve our attention, that is why we publish
    the best 100-200 entries too.)

    a link is allowed in comments as long as they add value in the form of information, images, humor, etc. (links to the front page of your personal blog or website are not okay). unwelcome links (to commercial products or services of others, offensive material etc. ) will be redacted. and, ... yes, spam gets banned. no, we do not post fake comments.

    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
    501,537 subscribers
    - see sample
    - see sample