Skip to content

Instantly share code, notes, and snippets.

@arnoutwittebrood

arnoutwittebrood/index.html

Created November 13, 2012 21:40
Show Gist options
  • Save arnoutwittebrood/4068580 to your computer and use it in GitHub Desktop.
Save arnoutwittebrood/4068580 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Anonymous. CSS guy
Raw
index.html
<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>
Raw
style.css
.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