Let's Create A Simple Smiley Face With CSS

#css #codenewbie #webdev #codepen

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
}