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.
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:
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:
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.
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.
The pig's head div is a child to the box div, and its positioning is based on its relationship to that box.
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.
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:
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.