In this article I'm gonna show you how to create a very simple smiley face with css.
Let us begin
Step 1 : Creating the face
First create a div and give it a class.
Since this div will be the face I named it "face".
<div class="face"></div>
The styling part is easy.
We create a square first and then with the help of border-radius
we'll make it round.
.face {
background-color: #fcba03;
width: 400px;
height: 400px;
border-radius: 100%;
}
Step 2 : Creating the mouth
We want the mouth to be on the face so we need to create a new div inside our previous div.
<div class="face">
<div class="mouth"></div>
</div>
mouth {
position: absolute;
background-color: black;
width: 215px;
height: 90px;
border-radius: 7px 7px 100px 100px;
top: 250px;
left: 90px;
}
Step 3 : Creating the eyes
Moving on to the eyes :
I've created a div for the eyes , so that both eyes would be in the same section. itds also be easier to move them around.
A: Eye section :
<div class="face">
<div class="mouth"></div>
<div class="eye-section"></di>
</div>
.eye-section {
/* added border just to see the where the eye section is. We'll remove it later. */
border: solid red 2px;
width: 275px;
height: 100px;
position: absolute;
left: 60px;
top: 70px;
}
B: Creating the eyes
<div class="face">
<div class="mouth"></div>
<div class="eye-section">
<div class="left-eye"></div>
<div class="right-eye"></div>
</di>
</div>
.left-eye, .right-eye {
background-color: #4f2103;
width: 52px;
height: 65px;
border-radius: 50px;
position: absolute;
top: 25px;
}
.right-eye {
right: 20px;
}
Step 4 : Creating pupil
And at last we create the pupils with pseudo elements.
.left-eye::before, .right-eye::before {
content: "";
display: block;
background-color: white;
width: 23px;
height: 23px;
border-radius: 100px;
position: absolute;
top: 20px;
left: 10px
}
And now you're done.
Here's the codepen
I hope you guys liked this simple and easy css art
Top comments (2)
That is AWESOME!!!!
Thank you 🌹