Emoji expression using pure css
I use number of div tags to create these emoji expression if you want more video like this please subscribe our channel and thanks for your visit
Source code:
Html:
<!DOCTYPE html>
<html>
<head>
<title>emoji</title>
<!-- css reference -->
<link rel="stylesheet" type="text/css" href="emoji.css">
</head>
<body>
<!-- Emoji container -->
<div id="angry">
<!-- Each div contains eack emoji,and the name for the expressions is given in the div id-->
<div id="aface">
<div class="ael"></div>
<div class="aer"></div>
<h1 class="al"></h1>
<h1 class="ar"></h1>
<div id="am"></div>
</div>
</div>
<div id="sad">
<!-- Each div contains eack emoji,and the name for the expressions is given in the div id-->
<div id="aface">
<h1 class="sal"></h1>
<h1 class="sar"></h1>
<div id="sam"></div>
</div>
</div>
<div class="sad"></div>
<div id="silent">
<!-- Each div contains eack emoji,and the name for the expressions is given in the div id-->
<div id="aface">
<h1 class="sial"></h1>
<h1 class="siar"></h1>
<div id="ak"></div>
</div>
</div>
<div class="silent"></div>
<div id="smile">
<!-- Each div contains eack emoji,and the name for the expressions is given in the div id-->
<div id="aface">
<h1 class="smal"></h1>
<h1 class="smar"></h1>
<div id="smam"></div>
</div>
</div>
<div class="smile"></div>
<div id="happy">
<!-- Each div contains eack emoji,and the name for the expressions is given in the div id-->
<div id="aface">
<h1 class="hal"></h1>
<h1 class="har"></h1>
<div id="haam"></div>
<div id="ham"></div>
</div>
</div>
<div class="happy"></div>
<!-- And Some DOM manipulations using javascript -->
<script type="text/javascript">
var a=document.getElementById('angry');
var sad= document.getElementById('sad');
a.addEventListener('mouseover',function () {
var am=document.getElementById('am');
am.style.borderRight="10px solid red";
am.style.borderTop="10px solid red";
a.addEventListener('mouseleave',function () {
var am=document.getElementById('am');
am.style.borderRight="10px solid #a5a5a5";
am.style.borderTop="10px solid #a5a5a5";
});
});
sad.addEventListener('mouseover',function () {
var sam=document.getElementById('sam');
sam.style.borderRight="10px solid red";
sam.style.borderTop="10px solid red";
sad.addEventListener('mouseleave',function () {
var sam=document.getElementById('sam');
sam.style.borderRight="10px solid #a5a5a5";
sam.style.borderTop="10px solid #a5a5a5";
});
});
silent.addEventListener('mouseover',function () {
var ak=document.getElementById('ak');
ak.style.background="red";
silent.addEventListener('mouseleave',function () {
var ak=document.getElementById('ak');
ak.style.background="#a5a5a5";
});
});
smile.addEventListener('mouseover',function () {
var smam=document.getElementById('smam');
smam.style.borderRight="10px solid red";
smam.style.borderTop="10px solid red";
smile.addEventListener('mouseleave',function () {
smam.style.borderRight="10px solid #a5a5a5";
smam.style.borderTop="10px solid #a5a5a5";
});
});
happy.addEventListener('mouseover',function () {
var ham=document.getElementById('ham');
var haam=document.getElementById('haam');
ham.style.borderRight="10px solid red";
ham.style.borderTop="10px solid red";
haam.style.borderBottom="red";
haam.style.background="red";
happy.addEventListener('mouseleave',function () {
ham.style.borderRight="10px solid #a5a5a5";
ham.style.borderTop="10px solid #a5a5a5";
haam.style.background="#a5a5a5";
haam.style.borderBottom="#a5a5a5";
});
});
// Source code in the description
</script>
</body>
</html>
Css:
*{
box-sizing:border-box;
}
body{
display: flex;
margin:0;
padding:0;
}
/*Each id will accessed and style will be applied on by one and i use hover effect for express the emoji expression*/
/*If you Like this video please share and subscribe*/
#angry,#sad,#silent,#smile,#happy
{
width:150px;
height:150px;
background-color:#D3D3D3;
border-radius:100%;
margin:60px;
position:relative;
top: 200px;
cursor: pointer;
}
#angry:hover{
background-color:rgb(251, 208, 67);
box-shadow:1px 1px 20px rgb(251, 208, 67);
}
#sad:hover{
background-color:rgb(251, 208, 67);
box-shadow:1px 1px 20px rgb(251, 208, 67);
}
#silent:hover{
background-color:rgb(251, 208, 67);
box-shadow:1px 1px 20px rgb(251, 208, 67);
}
#smile:hover{
background-color:rgb(251, 208, 67);
box-shadow:1px 1px 20px rgb(251, 208, 67);
}
#happy:hover{
background-color:rgb(251, 208, 67);
box-shadow:1px 1px 20px rgb(251, 208, 67);
}
.ael{
width:40px;
height:10px;
background-color:#000;
border-radius:10px;
transform:rotate(20deg);
position:relative;
top:45px;
left:30px;
cursor: pointer;
}
.aer{
width:40px;
height:10px;
background-color:#000;
border-radius:10px;
transform:rotate(-20deg);
position:relative;
top:35px;
left:80px;
cursor: pointer;
}
.al{
width:20px;
height:20px;
border-radius:15px 0px 15px 25px;
border-bottom:5px solid black;
border-left:5px solid black;
transform:rotate(-40deg);
position:relative;
top:15px;
left:45px;
}
.ar{
width:20px;
height:20px;
border-radius:15px 0px 15px 25px;
border-bottom:5px solid black;
border-left:5px solid black;
transform:rotate(-50deg);
position:relative;
top:-28px;
left:85px;
}
#am
{
width:45px;
height:45px;
border-top:10px solid #a5a5a5;
position: relative;
top:-40px;
left:55px;
border-right:10px solid #a5a5a5;
border-radius:10px 30px 10px 0px;
transform:rotate(-45deg);
}
#sad #aface{
position: relative;
top:20px;
}
#sad .sal{
width:20px;
height:20px;
border-radius:30px 30px 30px 30px;
border-bottom:5px solid black;
border-left:5px solid black;
transform:rotate(-40deg);
position:relative;
top:15px;
left:45px;
}
#sad .sar{
width:20px;
height:20px;
border-radius:30px 30px 30px 30px;
border-bottom:5px solid black;
border-left:5px solid black;
transform:rotate(-50deg);
position:relative;
top:-28px;
left:85px;
}
#sad #sam
{
width:35px;
height:35px;
border-top:10px solid #a5a5a5;
position: relative;
top:-40px;
left:60px;
border-right:10px solid #a5a5a5;
border-radius:10px 50px 10px 0px;
transform:rotate(-45deg);
}
#silent #aface{
position: relative;
top:20px;
}
#silent .sial{
width:10px;
height:10px;
background-color: #000;
border-radius:100%;
position:relative;
top:15px;
left:45px;
}
#silent .siar{
width:10px;
height:10px;
background-color: #000;
border-radius:100%;
position:relative;
top:-16px;
left:95px;
}
#silent #ak
{
width:70px;
height:10px;
background-color: #a5a5a5;
border-radius:10px;
position: relative;
top:-10px;
left:40px;
}
#smile #aface{
position: relative;
top:20px;
}
#smile .smal{
width:20px;
height:20px;
border-radius:30px 30px 30px 30px;
border-bottom:5px solid black;
border-left:5px solid black;
transform:rotate(130deg);
position:relative;
top:15px;
left:40px;
}
#smile .smar{
width:20px;
height:20px;
border-radius:30px 30px 30px 30px;
border-bottom:5px solid black;
border-left:5px solid black;
transform:rotate(130deg);
position:relative;
top:-28px;
left:90px;
}
#smile #smam
{
width:35px;
height:35px;
border-top:10px solid #a5a5a5;
position: relative;
top:-45px;
left:60px;
border-right:10px solid #a5a5a5;
border-radius:10px 50px 10px 0px;
transform:rotate(130deg);
}
#happy #aface{
position: relative;
top:20px;
}
#happy .hal{
width:25px;
height:25px;
border-radius:10px 30px 30px 30px;
border-bottom:5px solid black;
transform:rotate(175deg);
position:relative;
top:15px;
left:40px;
}
#happy .har{
width:25px;
height:25px;
border-radius:30px 30px 10px 30px;
border-left:5px solid black;
transform:rotate(95deg);
position:relative;
top:-31px;
left:90px;
}
#happy #haam{
width:57px;
height:15px;
border-bottom:20px solid #a5a5a5;
position: relative;
top:-43px;
left:51px;
background-color:#a5a5a5;
border-radius: 10px ;
}
#happy #ham
{
width:50px;
height:50px;
border-top:10px solid #a5a5a5;
position: relative;
top:-82px;
left:54px;
border-right:10px solid #a5a5a5;
border-radius:10px 30px 10px 0px;
transform:rotate(135deg);
}
/*Hover effect*/
#angry #aface:hover{
position: relative;
right:20px;
}
#sad #aface:hover{
position: relative;
top:35px;
}
#smile #aface:hover{
position: relative;
top:10px;
}
#happy #aface:hover{
position: relative;
top:-5px;
}
Comments
Post a Comment