Make Your First CSS Art From Scratch.

Make Your First CSS Art From Scratch.

Helitha Rupasinghe's photo
Helitha Rupasinghe
·

7 min read

Table of contents

In this post, we are going to be making Homer Simpson in CSS. To help you personalise and make it your own, I'll walk you through the code and then explain how to apply it. Let's get started now!

Getting Started

Go ahead and initialise our new project using the CodePen playground or setup your own project on Visual Studio Code with the following file structure under your src folder.

Homer Simpson Starter Files
  |- CSS
      |- style.css 
  |- /src
    |- index.html

Part 1: Setting up our Document

In our examples, I'll stick to using only HTML and CSS, although you are free to use any technology you find most convenient. The following should go in the <body> of a new HTML document or a blank Pen on CodePen for the Homer Simpson Design.

<body>
  <div class="container">
      <div class="hair hair1"></div>
      <div class="thirdEye">
        <div class="pupil animate"></div>
      </div>
      <div class="forehead"></div>
      <div class="eye">
        <div class="pupil right rightanimate"></div>
      </div>
      <div class="eye left">
        <div class="pupil leftanimate"></div>
      </div>
      <div class="nose"></div>
      <div class="ear"></div>
      <div class="cheek"></div>
      <div class="beard"></div>
      <div class="smile"></div>
      <div class="neck"></div>
      <div class="neck-bottom"></div>
      <div class="v-neck"></div>
      <div class="shirt-left"></div>
      <div class="shirt-right"></div>
      <div class="body"></div>
      <div class="shoulder-left"></div>
      <div class="shoulder-right"></div>
  </div>
</body>

Part 2: Specify colors, positions, font and sizes in our CSS.

Normally, you'll need to know the size and colour scheme of the visual you have in front of you before you can create one. I'll give you those measurements and colours in this particular situation.

Now let's include those measurements and colours in our css file.

:root {
  --skin-color: #fad901;
  --beard-color: #bdab7d;
  --shirt-color: #fdfdfd;
  --eyes-color: #fdfef4;
  --hair-color: #011d2d;
}

:root {
  --pos-left-hair: 150px;
  --post-left-forehead: 102px;
  --pos-right-eye: 25px;
  --pos-left-pupil: 20px;
  --pos-bottom-nose: 190px;
  --pos-top-beard: calc(var(--pos-bottom-nose) + 20px);
  --pos-right-beard: 60px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fed90f;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.container {
  width: 300px;
  height: 400px;
  margin: 80px auto 0;
  border: 1px solid transparent;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.88);
  transition: 0.8s margin ease-in;
  backdrop-filter: blur(10px);
}

.hair {
  position: absolute;
  left: var(--pos-left-hair);
  top: 40px;
  border: 3px solid transparent;
  border-top: 3px solid black;
  border-left: 3px solid black;
  width: 69px;
  height: 65px;
  border-radius: 50%;
  transform: rotate(30deg);
  z-index: 10;
}

.hair1 {
  top: 29px;
}

.hair.hair2 {
  position: absolute;
  left: calc(var(--pos-left-hair) - 20px);
  transform: rotate(30deg);
}

.thirdEye {
  position: absolute;
  width: 70px;
  height: 66px;
  top: 42px;
  right: var(--pos-right-eye);
  background-color: var(--eyes-color);
  border-radius: 50%;
  border: 3px solid black;
  transform: rotate(-5deg);
}

.forehead {
  border-top: 3px solid black;
  border-left: 3px solid black;
  border-right: 3px solid black;
  width: 150px;
  height: 150px;
  border-radius: 100px 110px 0 0;
  position: absolute;
  top: 50px;
  left: var(--post-left-forehead);
  background-color: var(--skin-color);
  transform: rotate(-8deg);
  z-index: -2;
}

.forehead::after {
  position: absolute;
  right: -10px;
  bottom: -4px;
  content: "";
  width: 35px;
  height: 25px;
  display: block;
  background-color: inherit;
  border-radius: 50%;
  border: 3px solid transparent;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  transform: rotate(-25deg);
}

.eye {
  position: absolute;
  width: 70px;
  height: 66px;
  top: 130px;
  right: var(--pos-right-eye);
  background-color: var(--eyes-color);
  border-radius: 50%;
  border: 3px solid black;
  transform: rotate(-5deg);
}

.eye.left {
  width: 76px;
  height: 73px;
  right: calc(var(--pos-right-eye) + 50px);
  z-index: 50;
}

.pupil {
  position: absolute;
  top: 30px;
  left: var(--pos-left-pupil);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: black;
}

.pupil.right {
  left: calc(var(--pos-left-pupil) + 10px);
}

.nose {
  position: absolute;
  bottom: calc(var(--pos-bottom-nose) + 1px);
  right: 37px;
  width: 45px;
  height: 27px;
  background-color: var(--skin-color);
  border: 3px solid transparent;
  border-left: none;
  border-right: 3px solid black;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  border-radius: 0 90px 100px 0;
  transform: rotate(-8deg);
  z-index: 40;
}

.cheeck {
  width: 140px;
  height: 100px;
  background-color: var(--skin-color);
  position: absolute;
  top: 158px;
  left: calc(var(--post-left-forehead) + 15px);
  border-top: 0px solid var(--skin-color);
  border-left: 3px solid black;
  transform: rotate(-8deg);
  z-index: -1;
}

.cheeck::after {
  content: "M";
  position: absolute;
  top: -15px;
  left: -21px;
  display: block;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 3em;
  transform: rotate(-8deg);
}

.beard {
  position: absolute;
  top: var(--pos-top-beard);
  right: var(--pos-right-beard);
  width: 95px;
  height: 90px;
  background-color: var(--beard-color);
  border-radius: 50%;
  border: 3px solid black;
  transform: rotate(165deg);
}

.beard::after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 40px;
  background-color: inherit;
  width: 85px;
  height: 40px;
  display: block;
  border: 3px solid transparent;
  border-bottom: 3px solid black;
  border-right: none;
  transform: rotate(8deg);
}

.beard::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -3px;
  background-color: inherit;
  width: 20px;
  height: 20px;
  display: block;
  border: 3px solid transparent;
  border-left: 3px solid black;
  border-top: 3px solid black;
  border-radius: 50%;
  transform: rotate(-14deg);
}

.smile {
  width: 120px;
  height: 38px;
  background-color: var(--beard-color);
  position: absolute;
  top: calc(var(--pos-top-beard) + 20px);
  right: calc(var(--pos-right-beard) - 45px);
  border: 3px solid transparent;
  border-bottom: 3px solid black;
  border-right: 3px solid black;
  border-radius: 50%;
  transform: rotate(-8deg);
  z-index: 10;
}

.smile::after {
  content: "";
  width: 9px;
  height: 15px;
  position: absolute;
  top: 15px;
  left: 5px;
  border: 3px solid transparent;
  border-left: 3px solid black;
  border-radius: 40%;
  background-color: transparent;
  display: block;
  transform: rotate(10deg);
}

.smile::before {
  content: "";
  width: 50px;
  height: 60px;
  display: block;
  position: absolute;
  top: -40px;
  right: 2px;
  background-color: inherit;
  border-radius: 50%;
  border: 3px solid transparent;
  border-right: 3px solid black;
  border-top: 3px solid black;
  transform: rotate(-18deg);
}

.ear {
  width: 32px;
  height: 32px;
  border: 3px solid transparent;
  border-left: 3px solid black;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  border-radius: 50%;
  background-color: var(--skin-color);
  position: absolute;
  top: calc(var(--pos-top-beard) - 5px);
  left: calc(var(--post-left-forehead) + 5px);
  transform: rotate(-8deg);
}

.ear::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top: 3px solid black;
  border-right: 3px solid black;
}

.neck {
  width: 100px;
  height: 85px;
  background-color: var(--skin-color);
  position: absolute;
  top: 243px;
  left: 115px;
  transform: rotate(8deg);
  z-index: -1;
  border-left: 3px solid black;
}

.neck::after {
  content: "";
  width: 18px;
  height: 85px;
  position: absolute;
  display: block;
  top: -8px;
  left: -24px;
  border-radius: 50%;
  border: 3px solid transparent;
  transform: rotate(5deg);
  border-right: 3px solid black;
  z-index: 10;
}

.neck::before {
  content: "";
  width: 10px;
  height: 40px;
  display: block;
  position: absolute;
  bottom: 10px;
  right: -12px;
  background-color: transparent;
  border-radius: 50%;
  border: 3px solid none;
  border-left: 3px solid black;
  transform: rotate(-6deg);
}

.neck-bottom {
  position: absolute;
  width: 35px;
  height: 60px;
  top: 314px;
  left: 194px;
  background-color: var(--skin-color);
  border: 3px solid transparent;
  border-right: 3px solid black;
  border-radius: 50%;
  transform: rotate(-28deg);
}

.v-neck {
  width: 50px;
  height: 38px;
  background-color: transparent;
  position: absolute;
  top: 306px;
  left: 186px;
  transform: rotate(65deg) skew(30deg, 350deg);
  border-right: 3px solid black;
  border-bottom: 3px solid black;
}

.v-neck::after {
  position: absolute;
  top: 19px;
  left: 23px;
  content: "";
  width: 10px;
  height: 50px;
  background-color: var(--shirt-color);
  transform: rotate(91deg);
  z-index: 100;
}

.v-neck::before {
  position: absolute;
  top: 13px;
  right: -23px;
  content: "";
  width: 20px;
  height: 30px;
  background-color: var(--shirt-color);
  transform: rotate(-1deg);
  z-index: 100;
}

.shirt-left {
  width: 90px;
  height: 44px;
  background-color: var(--shirt-color);
  position: absolute;
  top: 300px;
  left: 93px;
  transform: rotate(21deg);
  border: 3px solid transparent;
  border-right: 3px solid black;
}

.shirt-left::after {
  content: "";
  position: absolute;
  top: -15px;
  left: -12px;
  width: 15px;
  height: 53px;
  background-color: inherit;
  border-radius: 18px 0 0 0;
  border-top: 3px solid black;
  border-left: 3px solid black;
  transform: rotate(5deg);
  z-index: 10;
}

.shirt-left::before {
  content: "";
  position: absolute;
  top: -17px;
  left: -3px;
  width: 90px;
  height: 17px;
  background-color: var(--skin-color);
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom: 3px solid black;
  z-index: 10;
}

.shirt-right {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 45px;
  right: 56px;
  background-color: var(--shirt-color);
  border-top: 3px solid black;
  transform: rotate(26deg);
  z-index: -8;
}

.shirt-right::after {
  content: "";
  position: absolute;
  top: 3px;
  right: -20px;
  width: 39px;
  height: 16px;
  border: none;
  border-right: 3px solid black;
  border-left: 3px solid black;
  border-top: 3px solid black;
  background-color: inherit;
  transform: rotate(34deg) skew(301deg, 7deg);
  z-index: -11;
}

.shoulder-left {
  width: 100px;
  height: 80px;
  position: absolute;
  top: 340px;
  left: 30px;
  border-radius: 115px 115px 0 0;
  border: 3px solid black;
  border-bottom: none;
  background-color: var(--shirt-color);
  transform: rotate(8deg);
}

.shoulder-left::after {
  content: "";
  position: absolute;
  top: -23px;
  left: 39px;
  width: 100px;
  height: 20px;
  background-color: transparent;
  border-radius: 50%;
  border: none;
  border-bottom: 3px solid black;
  transform: rotate(13deg);
}

.shoulder-right {
  width: 100px;
  height: 80px;
  position: absolute;
  top: 330px;
  right: 10px;
  border-radius: 100px 100px 0 0;
  border: 3px solid black;
  border-bottom: none;
  background-color: var(--shirt-color);
  transform: rotate(1deg);
  z-index: -11;
}

.body {
  width: 194px;
  height: 180px;
  position: absolute;
  bottom: -80px;
  left: 60px;
  border-radius: 50%;
  border-top: 3px solid black;
  border-left: 3px solid black;
  border-right: 3px solid black;
  background-color: var(--shirt-color);
  z-index: -10;
}

h1 {
  color: rgba(15, 244, 205, 0.8);
  font-size: 54px;
  font-weight: 700;
  margin-top: 40px;
  text-align: center;
  text-shadow: 1px 2px rgba(255, 255, 255, 0.5);
}

@media only screen and (max-width: 935px) {
  .container {
    margin: 60px auto;
  }
}

.animate {
  animation: thirdEyeMovement 2s linear 0s infinite;
  animation-direction: alternate;
}

.leftanimate {
  animation: leftEyeMovement 2s linear 0s infinite;
  animation-direction: alternate;
}

.rightanimate {
  animation: rightEyeMovement 2s linear 0s infinite;
  animation-direction: alternate;
}

@keyframes thirdEyeMovement {
  from {
    left: 45px;
  }
  to {
    left: 15px;
  }
}

@keyframes leftEyeMovement {
  from {
    left: 45px;
  }
  to {
    left: 15px;
  }
}

@keyframes rightEyeMovement {
  from {
    left: 45px;
  }
  to {
    left: 15px;
  }
}

💡 Note - I advise using Figma to quickly prototype your static UX/UI design.

You can find my final product on my CodePen profile if you'd want to see it (below).

Part 3: Recap

https://codepen.io/javascriptdon/full/OJZevBm

After reading this, I sincerely hope you learnt something new and were inspired to try your hand at creating something lovely.

CSSHTML5ShowHashnodeBeginner DevelopersJavaScript