Drawing with code: an intro to CSS art
What is CSS Art?
CSS art lies at the intersection of vector illustration and front-end development. It involves manipulating HTML <div> elements with CSS to render shapes in the browser. These shapes are customized by assigning values to various properties like height, border-radius, box-shadow and background-color. With countless CSS properties to work with, it’s possible to create intricate pieces without a vector illustration software like Illustrator.
It’s All About the Div
The <div> 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 unless 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.
- Parent <div>
Every CSS composition starts with a parent div. Think of it as your canvas. In the example above,<div class='circle-container>acts as an invisible box that encapsulates all other elements. - Child <div>
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. - Custom classes
Each div needs a custom class. Your stylesheet uses these references to differentiate between elements. Be concise and descriptive for your styling sanity. In the code snippet above,class='inner-circle'is more effective thanclass='circle'because it allows me to target a specific sphere and give it distinct styles. Remember, assigning a class doesn't do anything by default. Styles need to be applied to give a div character.
CSS, A Little Recap
CSS is short for Cascading Style Sheets. A style sheet interacts with HTML elements to add aesthetic substance to a document. To apply custom styles, we create a series of CSS rules, typically in a separate.css file. Rules are CSS properties applied to one or more target HTML elements. Each consists of a selector and a declaration block. The selector points to the specific HTML element you want to customize, while the declaration defines the actual style.
The selector above refers to a class called, “rectangle”. We can tell because a full stop (.) precedes the name. Class selectors give us the flexibility to target specific HTML elements and are assigned inside opening tags like this:<div class='rectangle'>. ID selectors, which are preceded by the hash character (#), work similarly but should be used sparingly. Don’t forget, each element can only have one ID, and each page only permits one element with a particular ID.
Opt for class selectors when creating CSS art. As your digital creations become more complex, you will find it helpful to reuse the same class on several elements. Moreover, applying multiple classes to a single element will give you even more artistic control over it. Assigning custom classes is especially essential to CSS art because the “drawing” process entails styling divs, which are otherwise indistinguishable from one another.
Beginner’s CSS Toolkit
There is a lot you can accomplish with the basics. Start small, and add new CSS properties to your toolkit as you grow. Consider the subcomponents of your graphic, then simplify. For example, apply a solidbackground-color before playing with gradient, and experiment with border-radius before using clip-path to generate custom shapes. Try a flat version of your design before transforming it into a 3D edition. Below is a short list of CSS properties to help you get started.
height,width
These properties are used to set the height and width of your element. Default div size is determined by the HTML content it contains. Without any content, your div won’t appear to exist. It’s important to explicitly mention these properties for this reason. Usepxor%values to define your div’s size.background-color
This property sets the color of your div. I like using Google’s color picker to find the perfect hue and its corresponding HEX or RGB value.border-radius
This property sets the radius of your div’s corners. Divs are square by default, but you can generate other shapes by manipulating borders. If you assign one value to this property, that radius applies to all four corners. For example,border-radius: 50%makes a circle. You can specify up to three additional values to adjust corners separately.transform:translateY/translateX
This property repositions your div vertically/ horizontally along a 2D plane. Positioning elements is an essential part of creating more complex designs. Usepxvalues to start moving components around your canvas.
Trial and Error
Get ready for some serious trial and error. Drawing with code can be a painstaking process that requires patience and perseverance. Unlike creating a vector graphic with an illustration software, you can’t exactly see what you’re working with until your code renders in the browser. Getting a shape in the right spot might involve countless micro-adjustments. Stick with it!
You might be asking yourself, why would anyone go through the trouble of making illustrations with CSS? While it’s not practical for most applications, it’s a fun way to develop your skillset and portfolio. If you’re an illustrator, CSS art is a perfect introduction to coding. If you’re a front-end developer, drawing with code is a creative way to become more familiar with the subtleties of CSS.
I hope you enjoy the challenge of bringing your designs to life with HTML and CSS. Look out for more CSS art content and share your creations with the front-end community on CodePen. Happy coding!
References
- Intro to Creating CSS Art-Poulami Chakraborty
- A Beginner’s Guide to Pure CSS Images- Michael Mangialardi
- CSS Reference
- W3Schools
- GeeksForGeeks
- CSS Tricks
