HTML
<div class="face">
<div class="gloss"></div>
<div class="eyebrows leftEyebrow"></div>
<div class="eyebrows rightEyebrow"></div>
<div class="eyes leftEye"></div>
<div class="eyes rightEye"></div>
<div class="eyeballs leftEyeball"></div>
<div class="eyeballs rightEyeball"></div>
<div class="nose">
<div class="noseShadow1"></div>
<div class="noseShadow2"></div>
<div class="noseShadow3"></div>
<div class="noseLine1"></div>
<div class="noseLine2"></div>
</div>
<div class="ears leftEar"></div>
<div class="ears rightEar"></div>
<div class="earLines leftEarLine"></div>
<div class="earLines rightEarLine"></div>
<div class="mouth"></div>
</div>
CSS
html,
body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: #93DCE3;
background: -webkit-linear-gradient(#93DCE3 70%, #D9F0F2 100%);
background: -o-linear-gradient(#93DCE3 70%, #D9F0F2 100%);
background: -moz-linear-gradient(#93DCE3 70%, #D9F0F2 100%);
background: linear-gradient( #93DCE3 70%, #D9F0F2 100%);
}
.face {
display: block;
width: 208px;
height: 308px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #E2B5A0;
border: 3px solid #0C0807;
border-top-left-radius: 48% 42%;
border-top-right-radius: 48% 42%;
border-bottom-right-radius: 50% 54%;
border-bottom-left-radius: 50% 54%;
}
/*Shiny spot on head*/
.gloss {
position: absolute;
top: 30px;
left: 150px;
width: 25px;
height: 45px;
border-radius: 50%;
background: #F2DCCB;
-moz-transform: rotate(-32deg);
-ms-transform: rotate(-32deg);
-webkit-transform: rotate(-32deg);
transform: rotate(-32deg);
}
.eyebrows {
position: absolute;
top: 126px;
width: 42px;
height: 2px;
border: 2px solid #0C0807;
border-bottom: 0;
border-top-left-radius: 50% 98%;
border-top-right-radius: 50% 98%;
}
.eyebrows.leftEyebrow {
left: 36px;
}
.eyebrows.rightEyebrow {
right: 36px;
}
/*Main eye shape*/
.eyes {
position: absolute;
top: 145px;
width: 46px;
height: 24px;
border: 2px solid #0C0807;
background: #EAE6E3;
border-top-left-radius: 70% 40%;
border-top-right-radius: 70% 40%;
border-bottom-right-radius: 60% 80%;
border-bottom-left-radius: 60% 80%;
}
.eyes.leftEye {
left: 28px;
}
.eyes.rightEye {
right: 28px;
}
/*The pupils*/
.eyeballs {
position: absolute;
top: 154px;
width: 4px;
height: 4px;
background: #0C0807;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.eyeballs.leftEyeball {
left: 56px;
}
.eyeballs.rightEyeball {
right: 56px;
}
/*Main shadow to left of nose*/
.noseShadow1 {
position: absolute;
top: 142px;
left: 85px;
width: 6px;
height: 60px;
background-color: transparent;
border-radius: 40%;
box-shadow: 5px 3px 0px 0px #A27265;
-moz-box-shadow: 5px 3px 0px 0px #A27265;
-webkit-box-shadow: 5px 3px 0px 0px #A27265;
}
/*Smaller shadow to left of nose*/
.noseShadow2 {
position: absolute;
top: 146px;
left: 80px;
width: 8px;
height: 56px;
background-color: transparent;
border-radius: 40%;
box-shadow: 8px 3px 0px 0px #A27265;
-moz-box-shadow: 8px 3px 0px 0px #A27265;
-webkit-box-shadow: 8px 3px 0px 0px #A27265;
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
/*Shadow at bottom of nose*/
.noseShadow3 {
position: absolute;
top: 200px;
left: 88px;
width: 20px;
height: 16px;
background: #A27265;
border-top-left-radius: 60% 50%;
border-top-right-radius: 60% 50%;
border-bottom-left-radius: 80% 100%;
border-bottom-right-radius: 80% 100%;
}
/*Vertical nose line*/
.noseLine1 {
position: absolute;
left: 94px;
top: 144px;
width: 1px;
height: 50px;
border: 2px solid #0C0807;
border-left: 0;
border-top-right-radius: 98% 50%;
border-bottom-right-radius: 98% 50%;
}
/*Small nostril line*/
.noseLine2 {
position: absolute;
left: 94px;
top: 203px;
width: 1px;
height: 8px;
border: 2px solid #0C0807;
border-right: 0;
border-top: 0;
border-bottom: 0;
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.ears {
position: absolute;
top: 142px;
width: 40px;
height: 75px;
border: 3px solid #0C0807;
background: #E2B5A0;
border-top-left-radius: 100% 120%;
border-top-right-radius: 100% 120%;
border-bottom-right-radius: 90% 120%;
border-bottom-left-radius: 90% 120%;
z-index: -2;
}
.ears.leftEar {
left: -18px;
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.ears.rightEar {
right: -18px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.earLines {
position: absolute;
top: 156px;
width: 16px;
height: 28px;
border: 2px solid #0C0807;
border-bottom: 0;
border-top-left-radius: 100% 120%;
border-top-right-radius: 100% 120%;
z-index: -1;
}
.earLines.leftEarLine {
left: -10px;
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.earLines.rightEarLine {
right: -10px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.mouth {
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 174px;
width: 28px;
height: 10px;
border: 2px solid #0C0807;
background: #B07B6F;
border-top-left-radius: 70% 20%;
border-top-right-radius: 70% 20%;
border-bottom-right-radius: 70% 120%;
border-bottom-left-radius: 70% 120%;
}
1 Response