SCSS
*, *:before, *:after{
box-sizing: border-box;
}
*:before, *:after{
display: block;
position: absolute;
content: '';
}
$skin-color: #fccc29;
$skin-color-dark: #c8a220;
$bread-color: #d3a64b;
$eye-color: #ffffff;
$leg-color: #b7d6ef;
html { height: 100%; width: 100%; }
body{ background-color: rgb(44,76,121); }
.minifig-container{
position: absolute;
height: 300px;
width: 75px;
top: calc(50% - (300px / 2));
left: calc(50% - (75px / 2));
}
.minifigure{
position: relative;
width:75px;
height:200px;
#ears{
position:relative;
top:56px;
.ear{
z-index:-1;
position:absolute;
width:7px;
height:14px;
background-color: $skin-color;
border:1px solid rgba(0,0,0,.1);
border-radius:80%;
}
.ear.left{
left:0px;
border-right:none;
transform: rotate(-10deg);
}
.ear.right{
right:0;
border-left:none;
transform: rotate(10deg);
box-shadow: inset -3px -5px 5px -4px rgba(0,0,0, .5);
}
}
#head{
position: absolute;
z-index:3;
width: 65px;
height:120px;
top:5px;
left: calc(50% - (65px / 2));
background-color: $skin-color;
border-top-left-radius: 50% 25px;
border-top-right-radius: 50% 25px;
border-bottom-right-radius: 30%;
border-bottom-left-radius: 30%;
box-shadow: inset 0 -10px 30px -5px rgba(0,0,0, .4),
inset -8px 0 20px -5px rgba(0,0,0,.4),
0 10px 15px -8px rgba(0,0,0,.6) ;
/*&:before{
top:-2px;
left: calc(50% - (40px / 2));
width:40px;
height:10px;
border-radius: 50%;
background-color:$skin-color;
box-shadow: inset 0 10px 10px -8px rgba(0,0,0, .2);
}*/
.brew{
position:absolute;
top:28px;
z-index:1;
width: 30px;
height: 30px;
background-color: $skin-color;
border-radius: 50%;
}
.brew.left{
left: -1px;
box-shadow: inset 2px 1px 3px 1px rgba(255,255,255,.4);
}
.brew.right{
right:-1px;
box-shadow: inset 1px 2px 3px 1px rgba(255,255,255,.4);
}
.eye{
z-index: 10;
position:absolute;
top:33px;
width:30px;
height:30px;
background-color: $eye-color;
border-radius:50%;
box-shadow: inset 3px 10px 8px -7px rgba(0,0,0,.2);
&:before{
z-index:-10;
width:6px;
height: 6px;
top: calc(50% - (6px / 2));
left: calc(50% - (6px / 2));
background-color: black;
border-radius:50%;
}
&:after{
}
}
.eye.left{
right: 0px;
}
.nose{
z-index:12;
position:absolute;
top:58px;
left: calc(50% - (12px / 2));
width:12px;
height:12px;
border-radius:50%;
border:1px solid rgba(0,0,0,.1);
border-top:none;
background-color: $skin-color;
box-shadow: inset -16px 0px 5px -15px rgba(0,0,0,.2);
}
.bread{
position: absolute;
top:65px;
left: calc(50% - (66px / 2));
width:66px;
height: 54px;
background-color: $bread-color;
border-radius: 50%;
box-shadow: inset 0 -4px 20px -5px rgba(0,0,0,.5),
inset -4px 0 20px -5px rgba(0,0,0,.4);
&:before{
top:17px;
left: calc(50% - (50px / 2));
width:50px;
height:20px;
border-bottom: 1px solid rgba(0,0,0,.5);
border-radius:40%;
}
&:after{
top:40px;
left: calc(50% - (10px / 2 ));
width:10px;
height:8px;
border-bottom: 1px solid rgba(0,0,0,.2);
border-radius: 80%;
}
}
}
#body{
position: absolute;
z-index:3;
top:126px;
left: calc(50% - ((80px ) / 2));
height:0;
width:80px;
border-color: transparent transparent #ffffff transparent;
border-width: 0 10px 70px 10px;
border-style:solid;
&:before{
top:44px;
left: calc(50% - (30px / 2));
width: 30px;
height:7px;
border:1px solid rgba(0,0,0, .3);
border-bottom: none;
border-radius:50%;
}
.shirt{
position:absolute;
top: 4px;
left: calc(50% - (40px / 2));
width: 40px;
height:30px;
background-color: $skin-color;
-webkit-clip-path: polygon(50% 45%, 0% 0, 100% 0);
&:before{
left: -10px;
width: 30px;
height: 20px;
border:1px solid rgba(0,0,0, .5);
background-color: #fff;
border-radius: 1% 80% 1% 1%;
}
&:after{
right: -9px;
width: 30px;
height: 20px;
border:1px solid rgba(0,0,0, .5);
background-color: #fff;
border-radius: 80% 1% 1% 1%;
}
}
.collar{
position: absolute;
top:4px;
width:22px;
height: 7px;
}
.collar.left{
left:1px;
border: 1px solid rgba(0,0,0,.5);
border-top: none;
border-left:none;
border-radius: 30% 1%;
transform: rotate(30deg);
}
.collar.right{
right:1px;
border: 1px solid rgba(0,0,0,.5);
border-top: none;
border-right:none;
border-radius: 1% 30%;
transform: rotate(-30deg);
}
}
.shoulder{
position: absolute;
z-index:2;
top: 134px;
width:18px;
height:38px;
background-color: #ffffff;
border-radius: 36% 36% 20% 20%;
}
.shoulder.left{
left:-10px;
-webkit-transform: rotate(27deg);
box-shadow: inset -4px 0 10px -1px rgba(0,0,0, .2);
}
.shoulder.right{
right:-10px;
-webkit-transform: rotate(-27deg);
box-shadow: inset -6px 0px 15px -1px rgba(0,0,0, .2);
}
.arm{
position:absolute;
z-index:1;
bottom:15px;
width:17px;
height:25px;
background-color: #ffffff;
transform: rotate(9deg);
box-shadow: inset -5px 0 10px -1px rgba(0,0,0, .2);
}
.arm.left{
left:-18px;
transform: rotate(9deg);
border-radius: 40% 0% 20% 20%;
box-shadow: inset -5px 0 10px -1px rgba(0,0,0, .2);
&:after{
width: 16px;
height:12px;
bottom:-4px;
left:0px;
border-top:7px solid rgba(0,0,0, .2);
border-radius:50%;
}
}
.arm.right{
right:-18px;
transform: rotate(-9deg);
border-radius: 0% 40% 20% 20%;
box-shadow: inset -6px 0 15px -1px rgba(0,0,0, .3);
&:after{
width: 16px;
height:12px;
bottom:-4px;
left:0px;
border-top:7px solid rgba(0,0,0, .2);
border-radius:50%;
}
}
.hand{
position:absolute;
bottom: -9px;
width:19px;
height:21px;
border: 3px solid $skin-color;
border-bottom-color: transparent;
border-radius:50%;
z-index:3;
&:before{
top:9px;
left:-2px;
width:3px;
height:6px;
background-color: $skin-color;
border-radius: 50%;
box-shadow: 13px 0px 0 0 $skin-color;
}
}
.hand.left{
left:-24px;
box-shadow: inset 3px 3px 0 -1px $skin-color-dark,
3px -1px 0 -1px $skin-color-dark;
transform: rotate(-6deg);
.wrist.left{
position: absolute;
left:7px;
bottom:17px;
width:8px;
height:7px;
background-color: $skin-color;
transform: rotate(15deg);
box-shadow: inset -2px 3px 8px -1px rgba(0,0,0, .4);
}
}
.hand.right{
bottom:-9px;
right:-22px;
box-shadow: inset 3px 3px 0 -1px $skin-color-dark,
3px -1px 0 -1px $skin-color-dark;
transform: rotate(-6deg);
.wrist.right{
position: absolute;
right:2px;
bottom: 18px;
width:8px;
height:7px;
background-color: $skin-color;
transform: rotate(-2deg);
box-shadow: inset -2px 3px 8px -1px rgba(0,0,0, .4);
}
}
#belt{
position:absolute;
bottom:-6px;
left: calc(50% - (78px / 2));
width:78px;
height:10px;
background-color: $leg-color;;
}
#down{
position:absolute;
bottom:-36px;
left: calc(50% - (78px / 2));
width:78px;
height: 30px;
background-color: $leg-color;
box-shadow: inset 0 15px 15px -16px rgba(0,0,0, .5),
inset 0 -15px 15px -16px rgba(0,0,0, .5);
&:before{
left: calc(50% - (6px / 2));
width:6px;
height:30px;
border: 1px solid rgba(0,0,0, .3);
border-top: none;
box-shadow: inset 0 4px 5px 0 rgba(0,0,0, .3);
}
.leg{
position: absolute;
bottom: -40px;
height:40px;
width:36px;
background-color: $leg-color;
&:before{
top: 28px;
width:36px;
height: 12px;
background-color: rgba(0,0,0, .1);
box-shadow: 0 -5px 8px -4px rgba(255,255,255, .9);
}
}
.leg.right{
right:0;
}
}
}
