Creating Your First CSS Artwork From Scratch.

Homer Simpson

In this post, we are going to be making Homer Simpson in CSS. To help you personalize 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 initialize our new project using the CodePen playground or set up 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 color scheme of the visual you have in front of you before you can create one. I’ll give you those measurements and colors in this particular situation.

Now let’s include those measurements and colors 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

Homer Simpson (Codepen)

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
HRブログ

Talks about #realworld, #finance , #economics, #crypto and #technology.