Web4College

How to make emojis with CSS

The emoji should be used to check the feedback of a user for the website. These emojis represent the emotions of a user for your website.

Preview Example
Try it

.smiling-face

Define a class .smiling-face for the face.

Example
Try it
<style>
.smiling-face{
 width:200px;
 height:200px;
 background-color:yellow;
 border-radius:50%;
 position:relative;
}
</style>

position:relative; is necessary to position the descendent elements relative to this element.

Tip: Remember that the percentage values of length of the child elements are calculated with respect to the parent element.

.left-eye

Now define a class .left-eye for the left-eye. It is a child of the .face class element.

Example
Try it
<style>
.left-eye{
 width:23%;
 height:20%;
 background-color:rgb(240,240,240);
 border-radius:45%;
 position:absolute;
 left:20%;
 top:20%;
}
</style>

  • position:absolute; property defines position of the left-eye (using left and top properties).

  • The width should be greater than height.

  • 23% of width and 20% of height are the percentage values with respect to the parent element (.face).

  • 45% value converts the rectangular shape into a elliptical shape

.right-eye

The dimesions of the left-eye should be the same as right-eye. Define .right-eye class for the right-eye. It is also a child of the .smiling-face class element.

Example
Try it
<style>
.right-eye{
 right:20%;
 top:20%;
}
</style>

The properties of the right-eye are the same as left-eye. But there is only one difference. The left property should be replaced by the right property.

left-pupil

.left-pupil class name is specified for the left-pupil. Now, it is a child of the left-eye.

Example
Try it
<style>
.left-pupil{
 width:48%;
 height:45%;
 background-color:rgb(100,100,100);
 border-radius:50%;
 position:absolute;
 top:55%; /* 55 = 100 (total) - 45 (height) */
 left:26%; /* 26 = 50 (half of total) - 24 (half of width)   */
}
</style>

  • 55% value represents the distance between the top side of the left-pupil and and top side of the left-eye.

  • 26% value represents the distance between the left side of the left-pupil and and left side of the left-eye.

  • width is greater than height to make it elliptical.

right-pupil

.right-pupil class name is specified for the right-pupil. It has the same properties as the .left-pupil class has. But it is a child of the .right-eye element.

lip

.lip class element represents lip of the emoji. It is a child of the .smiling-face class element.

Example
Try it
<style>
.lip{
 width:62.5%;
 height:25%;
 background-color:yellow;
 border-radius:50%;
 border:solid red;
 border-width:1px 0px 0px 0px;
 transform:rotateZ(0deg);
 position:absolute;
 left:18.75%; /* 18.75 = (100-62.5)/2  */
 top:45%;  
}
</style>

position:absolute; property must be present to align it at the center.


When a user hovers the mouse over the emoji, the emoji should present a smiling view. The following properties should be changed.

Example
Try it
<style>
.smiling-face:hover .lip{
 transition-timing-function:ease-in; 
transition:transform 0s;
 transition-delay:2s;
 transform:rotateZ(180deg);
}
</style>

When a user hovers the mouse over the .smiling-face class element, the .lip class element changes its properties.


Similarly, the properties of .left-pupil and .right-pupil are changed.

Example
Try it
<style>
.smiling-face:hover .left-pupil, .smiling-face:hover .right-pupil{
transition-property:top,width,height;
transition-duration:1s,1s,1s;
transition-delay:0s,1s,1s;
top:27.5%;
width:46%;
height:43%;
}
</style>

Same is the case with the .right-pupil element.