<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
        xmlns:content="http://purl.org/rss/1.0/modules/content/"
        xmlns:wfw="http://wellformedweb.org/CommentAPI/"
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:atom="http://www.w3.org/2005/Atom"
        xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
        xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
        >

<channel>
<title>Baroque Portraits “Painted” Using Hand-Typed CSS Code | Designs &amp; Ideas on Dornob - Feed</title>
	<atom:link href="https://dornob.com/baroque-portraits-painted-using-hand-typed-css-code/feed/" rel="self" type="application/rss+xml" />
	<link>https://dornob.com</link>
	<description>Architecture, Interior and Furniture Design</description>
	<lastBuildDate>Thu, 07 Aug 2025 23:57:26 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.6.1</generator>
		<item>
		<title>Baroque Portraits &#8220;Painted&#8221; Using Hand-Typed CSS Code</title>
		<link>https://dornob.com/baroque-portraits-painted-using-hand-typed-css-code/</link>
				<pubDate>Mon, 25 Nov 2019 22:00:33 +0000</pubDate>
		<dc:creator><![CDATA[Stephanie Rogers]]></dc:creator>
				<category><![CDATA[Art & Design]]></category>
		<category><![CDATA[Art of Design]]></category>
		<category><![CDATA[artwork]]></category>
		<category><![CDATA[baroque]]></category>
		<category><![CDATA[computer]]></category>
		<category><![CDATA[digital]]></category>
		<category><![CDATA[painting]]></category>
		<guid isPermaLink="false">https://dornob.com/?p=74057</guid>
				<description><![CDATA[<p>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</p>
<p>The post <a href="https://dornob.com/baroque-portraits-painted-using-hand-typed-css-code/">Baroque Portraits “Painted” Using Hand-Typed CSS Code</a> first appeared on <a href="https://dornob.com">Dornob</a>.</p>]]></description>
					<content:encoded><![CDATA[<p class="p1">This &#8220;painting&#8221; by UI engineer <a href="https://diana-adrianne.com/" rel="nofollow noopener noreferrer" target="_blank">Diana Smith</a> 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.</p>
<p class="p1"><img fetchpriority="high" decoding="async" alt="Hand-coded CSS artworks by UI engineer Diana Smith " height="1472" src="https://cimg2.ibsrv.net/cimg/www.dornob.com/1472x1472_85/902/Diana-Smith-CSS-Baroque-Portrait-572902.jpg" width="1472" class="" title="Diana Smith's Baroque CSS Artworks " /></p>
<p class="p1"><img decoding="async" alt="Hand-coded CSS artworks by UI engineer Diana Smith " height="1523" src="https://cimg1.ibsrv.net/cimg/www.dornob.com/1500x1523_85/905/Diana-Smith-CSS-portrait-detail-572905.jpg" width="1500" class="" title="Diana Smith's Baroque CSS Artworks " /></p>
<p class="p1">Smith&#8217;s latest piece is called <a href="https://github.com/cyanharlow/purecss-lace" rel="nofollow noopener noreferrer" target="_blank">&ldquo;Pure CSS Lace,&rdquo;</a> and it&rsquo;s inspired by Flemish <a href="https://dornob.com/modern-vintage-baroque-bookcase-carved-into-a-blank-box/" rel="noopener noreferrer" target="_blank">Baroque</a> oil portraits. There&rsquo;s definitely something suggestive of Vermeer to it, though of course, it&rsquo;s lacking the rich textures of paint and brushstrokes found in the real thing, especially if we&rsquo;re talking Flemish Baroque a la Rembrandt.</p><div class="newsletter-inline-wrapper-article">
  <div class="newsletter-inline-desktop">
    <img decoding="async" class="newsletter-inline-icon" loading="lazy" width="64" height="53" src="https://dornob.com/wp-content/plugins/ib-newsletter/css/images/Dornob_NewsletterIcon.svg"/>
    <div class="newsletter-inline-text">
      <p class='first-line'>Newsletter Sign Up</p>
      <p class='second-line'>Get the latest design news!</p>
    </div>
    <div class="newsletter-inline-text-mobile" style="display: none">
      <p>Sign up for our newsletter and get the latest design news.</p>
    </div>
    <div class="inline-subscribe-success-text" style="display: none;">
      <p><strong>Thanks for subscribing!</strong> Expect a newsletter with the latest out-of-the ordinary designs and innovation soon.</p>
    </div>
    <div class="inline-email-signup">
        <input type="email" value="" name="mce-email-inline" id="mce-EMAIL-inline-article" class="required mce-email-inline" placeholder="Email Address" aria-required="true">
        <button type="submit" class='mce-signupbtn-inline' onclick="submitSignUp('inline', this)">Sign Up</button>
        <div class="newsletter-inline-privacy">
          <label class="check-label"><input type="checkbox" class="mce-privacy-inline"> <span class="checkmark" name="mce-PRIVACY" value="agree">
          <p class="popup-privacy-text">I agree to receive emails from the site. I can withdraw my consent at any time by unsubscribing. Dornob's <a target="_blank" href="https://www.internetbrands.com/privacy/privacy-main.html">privacy policy.</a></p>
          </span></label>
        </div>
    </div>
    <div class="newsletter-inline-message"></div>
  </div>
</div>

<p class="p4">Smith didn&rsquo;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&rsquo;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.</p>

<p class="p4">The unconventional artist did a video interview with <em>VICE</em> providing a little more detail about how and why she works with this unusual medium. In it, she explains: &ldquo;When I start out trying to create an image with CSS, what I&rsquo;m ultimately trying to do is create something that does not look like it was created with CSS. The <a href="https://github.com/cyanharlow/purecss-francine" rel="nofollow noopener noreferrer" target="_blank">Francine image</a> was originally inspired by a scene from the TV show <em>American Dad</em>. 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.&rdquo;</p>
<p class="p4">&ldquo;Normally, when people might think of CSS art, they might think of something that&rsquo;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.&rdquo;</p>
<p class="p4"><img decoding="async" alt="Diana Smith walks people through the process of creating her hand-coded pieces" height="703" src="https://cimg3.ibsrv.net/cimg/www.dornob.com/1371x703_85/903/Diana-Smith-process-572903.png" width="1371" class="" title="Diana Smith's Baroque CSS Artworks " /></p>
<p class="p4">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.</p>
<p class="p4">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 <a href="https://dornob.com/cubism-cubed-green-tendrils-wrap-animate-white-kitchen/" rel="noopener noreferrer" target="_blank">digital cubism</a>. Smith jokes that it looks &ldquo;interestingly awful.&rdquo; The live preview is only meant to be viewed in Chrome, but you can also check it out <a href="https://github.com/cyanharlow/purecss-lace" rel="nofollow noopener noreferrer" target="_blank">at Github</a> to see how different it looks from the image files if you&rsquo;re using another browser (particularly an older one).</p>
<p class="p4"><img loading="lazy" decoding="async" alt="Diana Smith's CSS artworks look wildly different depending on the browser you use to view them." height="679" src="https://cimg2.ibsrv.net/cimg/www.dornob.com/1072x679_85/906/Diana-Smith-different-browsers-CSS-art-572906.png" width="1072" class="" title="Diana Smith's Baroque CSS Artworks - Browser Differences " /></p>
<p class="p4"><img loading="lazy" decoding="async" alt="Hand-coded CSS artworks by UI engineer Diana Smith " height="1708" src="https://cimg0.ibsrv.net/cimg/www.dornob.com/1400x1708_85/904/Diana-Smith-Francine-572904.jpg" width="1400" class="" title="Diana Smith's Baroque CSS Artworks " /></p>
<p class="p4">If you&rsquo;re familiar with CSS and interested in trying out some art of your own, you can find an overview of the process over at <a href="https://www.creativebloq.com/features/get-started-with-css-art" rel="nofollow noopener noreferrer" target="_blank">Creative Bloq.</a></p><p>The post <a href="https://dornob.com/baroque-portraits-painted-using-hand-typed-css-code/">Baroque Portraits “Painted” Using Hand-Typed CSS Code</a> first appeared on <a href="https://dornob.com">Dornob</a>.</p>]]></content:encoded>
						   			</item>
	</channel>
</rss>
