Created
November 13, 2012 21:47
-
-
Save arnoutwittebrood/4068620 to your computer and use it in GitHub Desktop.
A CodePen by arnoutwittebrood. CSS guy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="head"></div> | |
<div class="neck"></div> | |
<div class="rump"></div> | |
<div class="arm-upper-right"></div> | |
<div class="arm-bottom-right"></div> | |
<div class="trousers"></div> | |
<div class="leg-left"> | |
<div class="leg-upper"></div> | |
<div class="leg-bottom"></div> | |
<div class="shoe"></div> | |
</div> | |
<div class="leg-right"> | |
<div class="leg-upper"></div> | |
<div class="leg-bottom"></div> | |
<div class="shoe"></div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.head { | |
width: 100px; | |
height: 110px; | |
background: #F9F6E1; | |
-moz-border-radius: 50px; | |
-webkit-border-radius: 50px; | |
border-radius: 50px; | |
border: 2px solid #e0ddca; | |
margin: 0 0 0 25px; | |
-moz-transform:rotate(5deg); | |
-webkit-transform:rotate(5deg); | |
-o-transform:rotate(5deg); | |
-ms-transform:rotate(5deg); | |
margin: 0 0 0 30px; | |
-webkit-box-shadow: inset 4px 4px 4px 4px #e0ddca; | |
box-shadow: inset 4px 4px 4px 4px #e0ddca; | |
} | |
/* eye */ | |
.head:before { | |
content: ""; | |
width: 20px; | |
height: 15px; | |
background: white; | |
-moz-border-radius: 4px; | |
-webkit-border-radius: 4px; | |
border-radius: 50px 50px 24px 24px; | |
z-index: 2; | |
position: absolute; | |
left:65px; | |
top: 36px; | |
} | |
/* nose */ | |
.head:after { | |
content: ""; | |
width: 30px; | |
height: 20px; | |
background: #F9F6E1; | |
-moz-border-radius: 10px; | |
-webkit-border-radius: 10px; | |
border-top-radius: 10px; | |
border-right-radius: 10px; | |
border-bottom-radius: 10px; | |
z-index: 2; | |
position: absolute; | |
left: 90px; | |
top: 50px; | |
border-top: 2px solid #e0ddca; | |
border-right: 2px solid #e0ddca; | |
border-bottom: 2px solid #e0ddca; | |
border-left: 2px solid #e0ddca; | |
-webkit-box-shadow: inset 1px 1px 4px 4px #e0ddca; | |
box-shadow: inset 1px 1px 4px 4px #e0ddca; | |
} | |
.neck { | |
border-left: 2px solid #e0ddca; | |
border-right: 2px solid #e0ddca; | |
border-bottom-left-radius: 10px; | |
border-bottom-right-radius: 10px; | |
background: #F9F6E1; | |
height: 30px; | |
width: 20px; | |
margin: -9px 0 0 45px; | |
z-index: 2; | |
position: absolute; | |
-moz-transform:rotate(16deg); | |
-webkit-transform:rotate(16deg); | |
-o-transform:rotate(16deg); | |
-ms-transform:rotate(16deg); | |
-webkit-box-shadow: inset 4px 4px 4px 4px #e0ddca; | |
box-shadow: inset 4px 4px 4px 4px #e0ddca; | |
} | |
.rump { | |
display:block; | |
width: 128px; | |
height: 180px; | |
border: 2px solid #c9c8c2; | |
margin: -10px 0 0 0; | |
z-index: 1; | |
top: 140px; | |
position: absolute; | |
background-color: #fcfaf3; | |
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; | |
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; | |
-moz-transform:rotate(-16deg); | |
-webkit-transform:rotate(-16deg); | |
-o-transform:rotate(-16deg); | |
-ms-transform:rotate(-16deg); | |
-webkit-box-shadow: inset 4px 4px 4px 4px #e2e1da; | |
box-shadow: inset 4px 4px 4px 4px #e2e1da; | |
} | |
.arm-upper-right { | |
z-index: 4; | |
background: #fcfaf3; | |
position: absolute; | |
top: 148px; | |
left: 30px; | |
border-left: 2px solid #c9c8c2; | |
border-right: 2px solid #c9c8c2; | |
border-bottom: 0; | |
border-top: 0; | |
height: 90px; | |
width: 15px; | |
border-right-radius: 10px; | |
border-top-right-radius: 10px; | |
border-top-left-radius: 10px; | |
-moz-transform:rotate(6deg); | |
-webkit-transform:rotate(6deg); | |
-o-transform:rotate(6deg); | |
-ms-transform:rotate(6deg); | |
-webkit-box-shadow: inset 4px 4px 4px 4px #e2e1da; | |
box-shadow: inset 4px 4px 4px 4px #e2e1da; | |
} | |
.arm-bottom-right { | |
z-index: 4; | |
background: #fcfaf3; | |
position: absolute; | |
top: 236px; | |
left: 28px; | |
border-left: 2px solid #c9c8c2; | |
border-right: 2px solid #c9c8c2; | |
border-bottom: 2px solid #c9c8c2; | |
border-top: 0; | |
height: 90px; | |
width: 15px; | |
border-right-radius: 10px; | |
border-top-right-radius: 5px; | |
border-top-left-radius: 0; | |
-moz-transform:rotate(-3deg); | |
-webkit-transform:rotate(-3deg); | |
-o-transform:rotate(-3deg); | |
-ms-transform:rotate(-3deg); | |
-webkit-box-shadow: inset 4px 4px 4px 4px #e2e1da; | |
box-shadow: inset 4px 4px 4px 4px #e2e1da; | |
} | |
/*hand*/ | |
.arm-bottom-right:after { | |
content: ""; | |
width: 20px; | |
height: 30px; | |
background: #F9F6E1; | |
-moz-border-radius: 10px; | |
-webkit-border-radius: 10px; | |
border-top-radius: 10px; | |
border-right-radius: 10px; | |
border-bottom-radius: 10px; | |
z-index: 2; | |
position: absolute; | |
left: -4px; | |
top: 90px; | |
border: 2px solid #e0ddca; | |
-moz-transform:rotate(-6deg); | |
-webkit-transform:rotate(-6deg); | |
-o-transform:rotate(-6deg); | |
-ms-transform:rotate(-6deg); | |
-webkit-box-shadow: inset 4px 4px 4px 4px #e0ddca; | |
box-shadow: inset 4px 4px 4px 4px #e0ddca; | |
} | |
.trousers { | |
display:block; | |
width: 126px; | |
height: 60px; | |
border: 2px solid #1e4688; | |
margin: -10px 0 0 0; | |
z-index: 2; | |
top: 270px; | |
left: 15px; | |
position: absolute; | |
background-color: #2c64c3; | |
-webkit-border-radius: 5px 5px 100px 30% / 5px 5px 70px 80%; | |
border-radius: 5px 5px 100px 30% / 5px 5px 70px 80%; | |
-webkit-box-shadow: inset 4px -4px 4px 4px #275aaf; | |
box-shadow: inset 4px -4px 4px 4px #275aaf; | |
} | |
.leg-upper { | |
background: #2c64c3; | |
height: 92px; | |
width: 20px; | |
z-index: 3; | |
position: absolute; | |
top: 320px; | |
left: 60px; | |
border-left: 2px solid #1e4688; | |
border-right: 2px solid #1e4688; | |
border-bottom-right-radius: 10px; | |
-moz-transform:rotate(-10deg); | |
-webkit-transform:rotate(-10deg); | |
-o-transform:rotate(-10deg); | |
-ms-transform:rotate(-10deg); | |
-webkit-box-shadow: inset 4px 4px 4px 4px #275aaf; | |
box-shadow: inset 4px 4px 4px 4px #275aaf; | |
} | |
.leg-bottom { | |
z-index: 4; | |
background: #2c64c3; | |
position: absolute; | |
top: 403px; | |
left: 58px; | |
border-left: 2px solid #1e4688; | |
border-right: 2px solid #1e4688; | |
border-bottom: 2px solid #1e4688; | |
height: 90px; | |
width: 20px; | |
border-right-radius: 10px; | |
border-bottom-left-radius: 10px; | |
border-bottom-right-radius: 10px; | |
-moz-transform:rotate(10deg); | |
-webkit-transform:rotate(10deg); | |
-o-transform:rotate(10deg); | |
-ms-transform:rotate(10deg); | |
-webkit-box-shadow: inset 4px 4px 4px 4px #275aaf; | |
box-shadow: inset 4px 4px 4px 4px #275aaf; | |
} | |
/* shoes */ | |
.shoe { | |
width: 90px; | |
height: 20px; | |
background: #5f4950; | |
border: 2px solid #423338; | |
position: absolute; | |
top: 486px; | |
left: 40px; | |
border-radius: 50px 90px 10px 10px / 60px 50px 20px 20px; | |
-webkit-box-shadow: inset 4px -4px 4px 4px #423338; | |
box-shadow: inset 4px -4px 4px 4px #423338; | |
} | |
.leg-right { | |
position: absolute; | |
z-index: 2; | |
top: -2px; | |
left: 0; | |
} | |
.leg-left { | |
position: absolute; | |
left: 10px; | |
top: -15px; | |
z-index: 1; | |
} | |
.talkbubble { | |
width: 120px; | |
height: 80px; | |
background: red; | |
position: relative; | |
-moz-border-radius: 10px; | |
-webkit-border-radius: 10px; | |
border-radius: 10px; | |
margin: 0 0 0 160px; | |
float: right; | |
} | |
.talkbubble:before { | |
content:""; | |
position: absolute; | |
right: 90%; | |
top: 26px; | |
width: 0; | |
height: 0; | |
border-top: 13px solid transparent; | |
border-right: 26px solid red; | |
border-bottom: 13px solid transparent; | |
moz-transform:rotate(-16deg); | |
-webkit-transform:rotate(-16deg); | |
-o-transform:rotate(-16deg); | |
-ms-transform:rotate(-16deg); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment