Building a smiley in css

Building a smiley in pure css is a bliss and challenging enough if you are new to FrontEnd. now let’s see the elements of smiley.

Smiley-css

we have two eyes(circle), one mouth (half cirlce), and the entire round circle. using border-radius we can make rounded circles, and half circles. (all hail css3).
The css code would look somewhat like the following :

.smiley{

width:350px;
height:350px;
background: yellow;
border-radius: 200px;
position: relative;
top:15%;
left:20%;


}
.eyes {
position: relative;
top: 80px;
width:250px;
height:100px;
margin: 0 auto;

}
.le,.re{
float: right;
margin: 20px 20px;
width: 60px;
height: 60px;
border-radius: 30px;
background: gray;
}
.re{
float:left;
}
.smile {
position: relative;
top:110px;
right:-120px;
height:45px;
width:90px;
border-radius: 0px 0px 90px 90px;
background: gray;
}

 

The Markup:

<div class="canvas">
    <div class="smiley">
        <div class="eyes">
            <div class="le"></div>
            <div class="re"></div>
        </div>
            <div class="smile"></div>
    </div>
</div>

This is how it looks like live:

See the Pen zrMPQe by Sarabpreet Singh (@sarabpreet) on CodePen.1330

About the author

sarabpreet

Add comment

By sarabpreet

Latest from Sarabpreet