1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5.00 out of 5)

Make a Smiley Face in CSS

To Make a Smiley Face in CSS the first thing that we will do is set up the div’s. We will call our main div id smiley. We will then add div’s for the eyes and mouth. Here is the div structure.

  • Main Div = smiley
  • Left Eye = leye
  • Right Eye = reye
  • Mouth = mouth
<div id="smiley">
 <div id="leye"></div>
 <div id="reye"></div>
 <div id="mouth"></div>
</div>

 

 

Now we will set up the stylesheet.

Subscribe To My YouTube Channel:
<style>
#smiley{
position:relative;
width:200px;
height:200px;
background-color:limeGreen;
border-radius:100%;
border:solid #000 2px;
}
#leye{
position:absolute;
left:25px;
top:25px;
width:20px;
height:30px;
background-color:#000;
border-radius:100%;
border:solid #fff 20px;
}
#reye{
position:absolute;
right:25px;
top:25px;
width:20px;
height:30px;
background-color:#000;
border-radius:100%;
border:solid #fff 20px;

}
#mouth{
position:absolute;
left:25%;
width:55%;
height:35%;
background-color:limeGreen;
border-radius:100%;
border-bottom:solid 3px #000;
bottom:30px;
}
</style>

 

 

Absolute Position For Making a Smiley Face in CSS *

You will notice that I gave the main div smiley a relative position and all the other divs inside smily an absolute position. That is because we are going to have to adjust where they eyes and mouth go relative to the main div smiley.

Border Radius 100%  For Making a Smiley Face in CSS *

We use border-radius 100% when we want things to be round all the way around the div. So for the eyes it makes sense to have then round. However you may be wondering why we did the same thing to the mouth. The reason why is so I can make the CSS smile.

Border Solid for Making a CSS Smiley Face *

I took advantage of being able to give color to a border property. I can target the top, left,right or even the bottom. So for the eyes I made the border go all the way around the eyes so I could get the white color in them. However for the mouth I only targeted the bottom of the CSS.

Make a Smiley Face in CSS was last modified: May 22nd, 2015 by Maximus Mccullough

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

make a smiley face in css

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.