#codevember -- saitama in css

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%; }
JAVASCRIPT
Expand for more options Login