Hey everybody I want to let you know that I have undertaken the grueling task of getting the heck away from WordPress. I was so sick of the problems and updates I had to do all the time. I am now using my ezbloo system and I am integrating all my old posts into the new system. It sucks, but in the end, I will save bundles of time. I needed to keep things simple and that is why I created ezbloo. I'll have more on this later for you guys after I am done with the total integration of my old posts here. So if you are looking for a post and need it faster, shoot me an email and I will make it a priority. [email protected]

Make a Smiley Face in CSS Edit
Last Update:2024-10-17 19:26:12
The Change:2024-10-16 10:33:26
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. 
<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.