CSS Art

Ben Lardie — Wed, 11 Mar 2020 16:58:58 +0000

I have always enjoyed writing CSS to create clean functional websites but could see that it potential to do a lot more. I was first introduced to CSS Art in this article. I couldn't believe Diana was able to create such beautiful images using just CSS.

I found it very inspiring and wanted to try and create my own art. I thought for my first piece I would do a portrait of a true American Hero, Homer J Simpson.

Homer is a great subject for my first portrait because of his simplicity. His face can be broken down into 8 shapes or so. I was able to accomplish it with 12 different divs. I also took advantage of pseudo elements ::before and ::after whenever I could such as his eyes.

.eyes {
  height: 100px;
  width: 100px;
  background-color: white;
  border-radius: 100%;
  position: absolute;
  border: 8px solid black;
  z-index: 2;
}

.eyes::before {
  content: '';
  height: 20px;
  width: 20px;
  background-color: black;
  z-index: 4;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
}

The before element aloud me to make the pupils without having to create more div's. The more I work with CSS the more I learn that those pseudo elements are your best friend. I have included a picture of my portrait so far although it's still a work in progress. He kind of looks a little counterfeit but I like him. Here is also the link to the codepen I am going to continue to clean it up. I am also thinking about trying to make some Marvel characters next.

DEV Community: Ben Lardie

CSS Art