DEV Community

Nazanin Ashrafi
Nazanin Ashrafi

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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%; }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
 mouth { position: absolute; background-color: black; width: 215px; height: 90px; border-radius: 7px 7px 100px 100px; top: 250px; left: 90px; }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
 .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; }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
 .left-eye, .right-eye { background-color: #4f2103; width: 52px; height: 65px; border-radius: 50px; position: absolute; top: 25px; }
Enter fullscreen mode Exit fullscreen mode 
 .right-eye { right: 20px; }
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode


And now you're done.

Here's the codepen

I hope you guys liked this simple and easy css art

Top comments (2)

Collapse
 
starryepidemic profile image
StarryEpidemic •

That is AWESOME!!!!

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi •

Thank you 🌹