CSS
/*http://cinan.sk/pub/lego/style.css*/
* {
box-sizing: border-box;
}
html {
zoom: 1;
padding: 0;
margin: 0;
}
body {
width: 500px;
height: 750px;
padding: 0;
margin: 50px;
background: #f90;
}
.container {
position: relative;
background: #f90 radial-gradient(ellipse at center, #ffab00 0%, #f90 30%) no-repeat;
z-index: 0;
}
.hat {
position: relative;
width: 223px;
margin: 0 auto;
}
.hat_1,
.hat_2 {
background: #000;
transform-origin: 50% 100%;
transform: perspective(110px) rotateX(12deg);
}
.hat_1 {
width: 146px;
height: 36px;
border-radius: 12px 12px 0 0;
margin-left: 38.5px;
}
.hat_2 {
width: 168px;
height: 33px;
margin-top: -3px;
margin-left: 27.5px;
background: linear-gradient(to right, #000 0%, #525252 50%, #000);
}
.hat_2_1 {
background: #000;
width: 100%;
height: 5px;
}
.hat_3 {
width: 223px;
height: 8px;
border: 2px #000 solid;
border-radius: 10px;
background: linear-gradient(to right, #525252 0%, #000 22%, #3c3c3c 69%, #000);
overflow: hidden;
}
.hat_3_1 {
width: 100%;
height: 17px;
background: #000;
border-radius: 18%;
position: relative;
top: 1px;
left: 29px;
}
.hat_4,
.hat_5 {
position: absolute;
background: #000 linear-gradient(to right, #000 28%, #525252 50%, #000 72%);
width: 100%;
height: 2px;
transform: scaleX(0.5);
}
.hat_4 {
top: 6px;
}
.hat_5 {
top: 37px;
}
.head {
width: 152px;
height: 98px;
background: #ffde00;
border: 3px solid rgba(255,255,255,0);
border-top: none;
position: relative;
margin: 0 auto;
border-radius: 0 0 26px 26px;
}
.head_1 {
height: 4px;
width: 100%;
background: linear-gradient(to right, #ffbc00 0%, #d49500 100%);
}
.head_2 {
position: relative;
left: 8px;
width: 131px;
height: 87.1px;
}
.head_2_1 {
position: absolute;
top: 0;
bottom: 0;
width: 36px;
right: 0;
background: linear-gradient(to bottom, #d49500 0%, #d49500 15%, #ffbd00 100%);
border-radius: 0 0 20px 0;
}
.head_3 {
position: absolute;
left: 4px;
top: 4px;
}
.head_3_1 {
width: 113px;
height: 89px;
background: linear-gradient(to right, #ffde00 0%, #ffde00 73%, #ffde00 100%);
border-radius: 0 0 20px 0;
float: left;
position: relative;
left: 6px;
}
.head_3_2 {
position: relative;
top: 0;
right: -22px;
width: 0;
height: 0;
border-right: 10px solid rgba(255,255,255,0);
border-top: 7px solid #d49500;
float: left;
}
.head_4 {
background: linear-gradient(to right, rgba(255,245,184,0.8) 0%, rgba(255,245,184,0.6) 5%, rgba(255,245,184,0.6) 9%, rgba(255,222,0,0) 16%, rgba(255,255,255,0) 100%);
position: absolute;
left: 8px;
width: 118px;
height: 88px;
top: 4px;
border-radius: 0 0 26px 26px;
}
.head_5 {
border: 3px solid #c88800;
position: absolute;
top: 0px;
left: -3px;
width: 152px;
height: 98px;
border-radius: 0 0 26px 26px;
border-top: none;
}
.hair {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.hair_1 {
position: relative;
top: -8px;
margin: 0 auto;
width: 51px;
height: 20px;
border: solid 4px;
border-color: #c57800 rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0);
border-radius: 83%/20px 20px 0 0;
transform: rotateX(180deg);
}
.hair_2,
.hair_3 {
position: absolute;
width: 39px;
height: 4px;
top: 17px;
}
.hair_2_1,
.hair_3_1 {
background: #440d01;
width: 100%;
height: 100%;
border-radius: 3px;
}
.hair_2 {
transform: rotateZ(17deg);
left: 18px;
}
.hair_3 {
transform: rotateZ(-17deg);
right: 18.5px;
}
.hair_4,
.hair_5 {
position: absolute;
top: 22.5px;
width: 53px;
height: 68px;
border: 4px solid;
border-radius: 0 49px 0 0;
border-color: rgba(255,255,255,0) #c57800 rgba(255,255,255,0) rgba(255,255,255,0);
transform: skew(0deg, 36deg) scale(0.7);
}
.hair_4 {
left: -6px;
}
.hair_5 {
left: 99px;
transform: rotateY(180deg) skew(0deg, 36deg) scale(0.7);
}
.hair_6 {
width: 62px;
height: 50px;
background: #450f00;
margin: 0 auto;
position: relative;
top: 26px;
border-radius: 20px 20px 10px 10px;
z-index: 1;
}
.hair_6_1 {
position: absolute;
width: 41px;
height: 11px;
background: #ffe000;
left: 11px;
top: 13px;
}
.hair_6_2,
.hair_6_3 {
height: 13px;
width: 14px;
background: #ffe000;
position: absolute;
top: 24px;
border-radius: 0 0 10px 10px;
}
.hair_6_2 {
left: 11px;
}
.hair_6_3 {
left: 38px;
}
.organs {
position: absolute;
top: 25px;
}
.organs_1,
.organs_2 {
width: 13px;
height: 13px;
border-radius: 100%;
background: #000;
position: absolute;
top: -3px;
}
.organs_1 {
left: 39px;
}
.organs_2 {
left: 94px;
}
.organs_3 {
position: absolute;
width: 31px;
background: #000;
height: 3px;
top: 38px;
left: 58px;
z-index: 2;
border-radius: 1px;
}
.widgets {
position: absolute;
top: 23px;
left: 3px;
right: 3px;
}
.widgets_1,
.widgets_4 {
position: absolute;
width: 19px;
height: 3px;
background: #000;
border-radius: 2px;
}
.widgets_1 {
margin-left: 1px;
}
.widgets_4 {
right: 1px;
width: 19px;
}
.widgets_2,
.widgets_3 {
width: 46px;
height: 32px;
border: 3px solid #000;
position: absolute;
top: -9px;
border-radius: 17px 10px 16px 14px/9px 8px 13px 14px;
}
.widgets_2 {
left: 20.5px;
transform: perspective(10px) rotateY(2.7deg);
}
.widgets_3 {
left: 74.2px;
transform: rotateY(180deg) perspective(10px) rotateY(2.7deg);
}
.widgets_5 {
position: relative;
top: -2px;
margin: 0 auto;
width: 23px;
height: 20px;
border: solid 3px rgba(255,255,255,0);
border-top-color: #000;
border-radius: 83%/20px 20px 0 0;
}
.neck {
border: 3px solid #c88801;
width: 98px;
margin: 0 auto;
height: 16px;
border-top: none;
background: linear-gradient(to right, #ffe300 15%, #d2ad00 100%);
}
.torso {
position: relative;
top: -3px;
z-index: 2;
}
.torso_1_1 {
width: 66px;
height: 191px;
background: #2c2c2c;
position: absolute;
left: 151px;
border: 3px solid #1e1e1e;
border-radius: 6px 0 0;
transform: skewX(-11deg);
border-top-color: #181818;
overflow: hidden;
}
.torso_1_1_1 {
height: calc(100% + 54px);
border: 3px solid #000;
border-bottom-color: rgba(255,255,255,0);
border-right-color: rgba(255,255,255,0);
border-radius: 36px 0/48px;
transform: rotateY(180deg) skewX(-9deg);
position: relative;
left: -12px;
width: 54px;
top: -3px;
}
.torso_1_1_2 {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 15px;
overflow: hidden;
}
.torso_1_1_2_1 {
background: radial-gradient(ellipse at center, rgba(255,255,255,0) 70%, rgba(255,255,255,0.5) 71%);
width: 50px;
height: 30px;
position: relative;
left: 2.1px;
transform: scale(1.1, 1);
}
.torso_1_2 {
width: 29px;
height: 191px;
background: #005324;
position: absolute;
left: 196.2px;
border: 3px solid #1e1e1e;
transform: skewX(-2deg);
border-top-color: #181818;
border-left: 3px solid #000;
border-right: none;
}
.torso_1_3 {
width: 30px;
height: 191px;
background: #005324;
position: absolute;
left: 221.5px;
border: 3px solid #1e1e1e;
border-top-color: #181818;
border-left: none;
border-right: 3px solid #000;
}
.torso_1_3_1 {
position: absolute;
left: -16px;
border: 3px solid #000;
height: 16px;
width: 16px;
border-bottom: none;
border-right: none;
border-radius: 15px 0;
top: -2px;
}
.torso_1_3_2 {
position: absolute;
background: #000;
width: 3px;
height: 10px;
left: -19px;
top: 7.1px;
transform: rotateZ(130deg);
border-radius: 1px;
}
.torso_1_4 {
position: absolute;
left: 221px;
width: 58px;
height: 39px;
top: 0;
overflow: hidden;
}
.torso_1_4_1,
.torso_1_4_2 {
position: absolute;
z-index: 1;
width: 0;
height: 0;
top: 3px;
}
.torso_1_4_1 {
border-left: 29px solid rgba(255,255,255,0);
border-right: 29px solid rgba(255,255,255,0);
border-top: 34px solid #000;
}
.torso_1_4_2 {
border-left: 25.5px solid rgba(255,255,255,0);
border-right: 25.5px solid rgba(255,255,255,0);
border-top: 29.5px solid #fff;
left: 3.75px;
}
.torso_1_4_3 {
position: absolute;
z-index: 1;
width: 69px;
height: 62px;
top: -48px;
background: #ffde00;
border: 3px solid;
border-radius: 50%;
left: -5.5px;
}
.torso_1_5 {
width: 117px;
height: 4px;
position: absolute;
left: 135.5px;
top: 188px;
background: #1e1e1e;
}
.torso_1_6 {
width: 77px;
height: 0;
position: absolute;
left: 211px;
border-top: 3px solid #181818;
z-index: 1;
}
.torso_2 {
transform: rotateY(180deg);
width: 500px;
height: 191px;
}
.torso_3 {
width: 228px;
height: 21px;
margin: 0 auto;
background: linear-gradient(to bottom, #1c1c1c 0%, #2c2c2c 26%);
position: relative;
border: 3px solid #1e1e1e;
border-top: none;
}
.torso_3_1 {
position: absolute;
bottom: 0;
left: 1px;
right: 1px;
height: 4px;
background: #1c1c1c;
}
.legs {
position: relative;
top: -3px;
left: 140px;
}
.legs_1_1 {
position: relative;
height: 96px;
width: 114px;
background: linear-gradient(to bottom, #1c1c1c 0%, #1c1c1c 7%, #333 8%, #333 14%, #4a4a4a 15%, #4a4a4a 21%, #7a7a7a 22%, #7a7a7a 27%, #707070 32%, #3c3c3c 42%, #3c3c3c 67%, #3c3c3c 70%, #1c1c1c 90%);
left: -4px;
}
.legs_1_2 {
position: relative;
height: 92px;
width: 109px;
border-right: #181a1d 3px solid;
background: #2c2c2c;
left: -4px;
}
.legs_1_3 {
width: 112px;
height: 56px;
background: #707070;
border: #181a1d 3px solid;
position: relative;
left: -7px;
overflow: hidden;
}
.legs_1_3_1 {
background: #2c2c2c;
position: absolute;
left: 0;
top: 4px;
width: 100%;
height: 200%;
border-radius: 4px/10px;
}
.legs_1_4 {
position: absolute;
top: 0;
left: -7px;
background: #f90;
border-right: 3px solid #1e1e1e;
width: 8px;
height: 188px;
transform: rotateZ(1.3deg);
}
.legs_2 {
position: absolute;
top: 0;
transform: rotateY(180deg);
left: 106px;
}
.legs_3 {
position: absolute;
top: 0;
left: 96px;
border: 3px solid #1c1c1c;
height: 99px;
width: 28px;
border-bottom-width: 5px;
}
.hands {
position: relative;
top: -445px;
z-index: 1;
}
.hands_1_1 {
position: relative;
left: 106px;
border: 3px solid #1c1c1c;
border-bottom: none;
height: 101px;
width: 64px;
transform: skewX(-23deg);
border-radius: 19px 0 0;
background: #2c2c2c;
}
.hands_1_1_1 {
position: absolute;
height: 80%;
width: 28px;
left: 21px;
top: 3px;
border-left: rgba(255,255,255,0.5) 3px solid;
border-radius: 10px/15px;
transform: scaleX(2.1);
}
.hands_1_1_1_1 {
position: absolute;
width: 16px;
height: 100%;
left: -5px;
background: linear-gradient(to bottom, rgba(44,44,44,0) 0%, rgba(44,44,44,0.73) 25%, #2c2c2c 61%);
top: 11px;
}
.hands_1_1_2 {
position: absolute;
height: 85px;
width: 28px;
left: 39px;
top: 13px;
border-radius: 4px 0 0 0/12px;
transform: scaleX(2.1) skewX(-1.3deg);
background: linear-gradient(82.5deg, #202020 18%, #111 36%);
}
.hands_1_2 {
position: relative;
left: 78px;
border-left: 3px solid #1c1c1c;
height: 64px;
width: 64px;
transform: skewX(-11deg);
background: linear-gradient(90deg, #202020 61%, #111 86%);
}
.hands_1_2_1 {
width: 43px;
height: 100%;
background: #2c2c2c;
border-radius: 0 17px 0 0/8px;
}
.hands_1_2_1_1 {
width: 10px;
position: relative;
left: 5px;
height: 100%;
background: linear-gradient(140deg, rgba(255,255,255,0.45) 0%, #2c2c2c 80%);
border-radius: 10px;
}
.hands_1_2_2 {
background: linear-gradient(90deg, rgba(255,255,255,0) 10%, #202020 61%, #111 86%);
width: 100%;
height: 8px;
}
.hands_1_3 {
position: relative;
left: 71px;
top: -10px;
border: 3px solid #1c1c1c;
height: 32px;
width: 67px;
transform: rotateZ(10deg) scaleY(0.6);
background: #1c1c1c;
border-radius: 50%;
}
.hands_1_3_1 {
position: relative;
top: -3px;
left: -0.5px;
background: #000;
height: 22px;
width: 61.5px;
border-radius: 50%;
}
.hands_1_4 {
position: relative;
left: 77px;
top: -32px;
width: 50px;
height: 37px;
background: linear-gradient(to right, #ffdf00 50%, #ffbe00 50%, #d39400 71%);
border: 3px solid #c88800;
border-radius: 50%/22%;
transform: rotateZ(10deg);
}
.hands_1_4_1 {
position: relative;
top: 18px;
left: -19px;
width: 84px;
height: 84px;
background: radial-gradient(ellipse at center, rgba(255,255,255,0) 43%, #c88800 43%, #c88800 49%, #ffdf00 49%);
border: 3px solid #c88800;
border-radius: 50%;
}
.hands_1_4_2,
.hands_1_4_3,
.hands_1_4_4,
.hands_1_4_5,
.hands_1_4_6,
.hands_1_4_7 {
background: #f90;
position: absolute;
}
.hands_1_4_2,
.hands_1_4_3 {
width: 23px;
height: 22px;
}
.hands_1_4_2 {
border-left: 3px solid #c88800;
top: 75px;
left: 4px;
transform: rotateZ(-10deg);
}
.hands_1_4_3 {
border-right: 3px solid #c88800;
transform: rotateZ(1deg);
top: 76px;
left: 21px;
}
.hands_1_4_4 {
transform: rotateZ(1deg);
width: 21px;
height: 24px;
top: 82px;
left: 20px;
}
.hands_1_4_5 {
width: 21px;
height: 24px;
top: 81px;
left: 8px;
transform: rotateZ(-10deg);
}
.hands_1_4_6,
.hands_1_4_7 {
transform: rotateZ(-7deg);
width: 24px;
height: 5px;
}
.hands_1_4_6 {
top: 97px;
left: -6px;
}
.hands_1_4_7 {
top: 95.5px;
left: 34px;
}
.hands_2 {
position: absolute;
transform: rotateY(180deg);
top: 0;
left: 433px;
}
