Getting Started With CSS Art

#css #html #beginners

I was really captivated by one of the links included in DEV's newsletter this week. It was a link to this pure CSS image of Frida Kahlo created by Adam Kuhn.

Adam Kuhn's Frida Kahlo css art — Adam Kuhn's Frida Kahlo CSS Art

How Do You Create Art From Code?

While I do have some experience with HTML and CSS, I didn't have any idea how to put the pieces together to create an image this beautiful using only CSS. I decided to hunt around for a basic tutorial regarding pure CSS images and found the post "A Beginner’s Guide to Pure CSS Images" by Michael Mangialard. This is a great beginner-level tutorial that walks through each step of creating a CSS koala image. Each part of the koala is a separate HTML div element with different CSS styling applied to it. I highly recommend checking it out.

Michael Mangialard's koala CSS art:

My Own CSS Image Project

I went through the tutorial and made my own edits to the code to create a pig image instead of a koala.

My CSS pig project:

What is a CSS Image?

A CSS image can be made with just HTML and CSS code. HTML is a markup language that provides the basic structure and content for web pages, and CSS is what gives that content its styling. CSS images can be made by creating HTML div elements then giving them different sizes, shapes, colors, and positioning to create an overall picture.

An HTML div is a tag used for grouping elements together and then styling them with CSS or giving them behavior with JavaScript.

code for box class — This is the code that creates the parent div box.

It's All Divs

For this project, all of the div elements that make up the image are nested within a parent div. This parent div is like an invisible frame around the pig's head. If the parent div is given a red border, you can see that it is essentially a box centered on the page. The child div elements positions are based on the relationship to the parent div. In other words, all the different pieces of the pig are positioned on the page in relation to that box.

pig css art — The red outline shows the invisible box the parent div created.

The pig's head div is a child to the box div, and its positioning is based on its relationship to that box.

code for head class — This is the code to create the pig's head, which is just a circle.

Z-Index

The rest of the elements that create the pig are positioned and styled this same way. A few also have a z-index, which allows you to stack the elements on top of each other in a certain order. So, for example, the pig's nose has a larger z-index than the eyes, since the nose lays on top of the eyes.

Clip-Path

Div elements are going to naturally be a rectangular shape. You can start curving the corners of the rectangle by setting a border-radius, and setting a border-radius of 50% will give us a circle.

For more complex shapes you can use a clip-path, which sets coordinates determining what part of an element should be shown. It's important to note that they are not supported by all browsers. You can learn more about them and their usage on Mozilla's website. I used a tool called Clippy, created by Bennett Feely, that allows you to draw the shape you want and then gives you the code for it. I used this to create the shape of the pig's ears.

Clippy allows you to easily make CSS shapes:

Are CSS Images Practical?

From what I can tell, CSS images aren't great for practical application. It would be much more effective to use a design program to create an SVG image. However, learning how to create them is a great way to become more familiar with CSS styling and I found it especially helpful in familiarizing myself with how positioning works.

Tools and References:
A Beginner's Guide to Pure CSS Images
Adam Kuhn's Frida Kahlo CodePen
Clippy
W3Schools CSS
Clip-Path - Mozilla