Drawing with code: an intro to CSS art
<h1>What is CSS Art?</h1>
<p>CSS art lies at the intersection of vector illustration and front-end development. It involves manipulating HTML <code><div> </code>elements with CSS to render shapes in the browser. These shapes are customized by assigning values to various properties like <code>height</code>, <code>border-radius</code>, <code>box-shadow</code> and <code>background-color</code>. With countless <a href="https://www.w3schools.com/cssref/" rel="noopener ugc nofollow" target="_blank">CSS properties</a> to work with, it’s possible to create intricate pieces without a vector illustration software like Illustrator.</p>
<h2>It’s All About the Div</h2>
<p>The <code><div></code> element is the building block of every pure CSS composition. A div is simply an empty container, often used to house other elements and create structure on a web page. It does not affect content or layout <em>unless</em> it’s styled with CSS or manipulated with scripts, making it extremely versatile. Take a look at the example below. Let’s break down the HTML portion of CSS art.</p>
<p><img alt="" src="https://miro.medium.com/v2/resize:fit:630/1*u6k_PcELbFm9CcXwo0VXPw.png" style="height:279px; width:700px" /></p>
<p>Graphic by Anna Pawl</p>
<ol>
<li><strong>Parent <div></strong><br />
Every CSS composition starts with a parent div. Think of it as your canvas. In the example above, <code><div class='circle-container></code> acts as an invisible box that encapsulates all other elements.</li>
<li><strong>Child <div></strong><br />
Styled child divs, which are nested within parent elements, give your composition structure and substance. Nesting elements is useful because you can position a child div relative to its parent. As your CSS skills improve, you’ll be able to create elaborate pieces with a single div. For now, break your vision down into simple parts and create a child div for every shape.</li>
</ol>
<p><a href="https://uxdesign.cc/drawing-with-code-716cb0b21b06"><strong>Read More</strong></a></p>