Zombie CSS Code

CSS Code

body {
  text-align: center;
  height: 100%;
  margin: 0px;
  background-color: #5B818B;
}

#zombie {
  margin: 20px auto;
  position: relative;
  height: 510px;
  width: 510px;
}
#zombie div {
  position: absolute;
}
#zombie div::before, #zombie div::after {
  content: '';
  position: absolute;
  display: block;
}

.back-dirt {
  width: 84px;
  height: 42px;
  border-radius: 42px 42px 0 0;
  background-color: #C65241;
  box-shadow: 102px 0 #C65241;
  top: 324px;
  left: 159px;
}
.back-dirt::before {
  width: 28px;
  height: 48px;
  border-radius: 50%;
  background-color: #C65241;
  top: 10px;
  left: 79px;
}
.back-dirt::after {
  width: 16px;
  height: 26px;
  border-radius: 50%;
  background-color: #C65241;
  left: -6px;
}

.front-dirt {
  width: 138px;
  height: 69px;
  border-radius: 70px 70px 0 0;
  background-color: #8C3939;
  box-shadow: 266px 0 #8C3939;
  top: 323px;
  left: 53px;
}
.front-dirt::before {
  width: 84px;
  height: 42px;
  border-radius: 42px 42px 0 0;
  background-color: #8C3939;
  box-shadow: 96px 0 #8C3939;
  bottom: 0px;
  left: 118px;
}
.front-dirt::after {
  width: 66px;
  height: 42px;
  border-radius: 42px 42px 0 0;
  background-color: #8C3939;
  bottom: 0px;
  left: 178px;
}

.dirt-details {
  width: 404px;
  height: 8px;
  background-color: #C65241;
  top: 391.777px;
  left: 53px;
}
.dirt-details::before {
  width: 20px;
  height: 10px;
  border-radius: 50%;
  background-color: #C65241;
  box-shadow: -4px 20px 0 4px #C65241;
  -webkit-transform: rotate(-24deg);
  -moz-transform: rotate(-24deg);
  -ms-transform: rotate(-24deg);
  -o-transform: rotate(-24deg);
  transform: rotate(-24deg);
  /*transform: rotate(-24deg);*/
  bottom: 56px;
  left: 70px;
}
.dirt-details::after {
  width: 20px;
  height: 10px;
  border-radius: 50%;
  background-color: #C65241;
  box-shadow: 4px 20px 0 4px #C65241;
  -webkit-transform: rotate(-24deg);
  -moz-transform: rotate(-24deg);
  -ms-transform: rotate(-24deg);
  -o-transform: rotate(-24deg);
  transform: rotate(-24deg);
  /*transform: rotate(24deg);*/
  bottom: 56px;
  left: 310px;
}

.tomb {
  width: 176px;
  height: 280px;
  border-radius: 88px 88px 0 0;
  background-color: #FEE3C4;
  box-shadow: 31px 0 #FDCD9E;
  top: 110px;
  left: 234px;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
  /*transform: rotate(5deg);*/
}
.tomb::before {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #5B818B;
  box-shadow: 211.099px 0 #5B818B, 177px 78px #FEE3C4;
  left: -13.889px;
  bottom: 143.539px;
}
.tomb::after {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #FDCD9E;
  top: 28.713px;
  left: 89.116px;
  box-shadow: 68.172px 5.997px #FDCD9E, 79.172px 81px #FDCD9E, 14.487px 204.997px #FDCD9E, 79.172px 129px #FDCD9E, 10px 144px #FDCD9E, -51px 157px #FDCD9E, -96px 135px #5B818B, 111px 148px #5B818B;
}

.tomb-details {
  width: 120px;
  height: 8px;
  background-color: white;
  box-shadow: 0px 50px white, 5px 5px #FDCD9E, 5px 55px #FDCD9E;
  top: 184px;
  left: 260px;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
  /*transform:rotate(5deg);*/
}

.rip {
  width: 4px;
  height: 32px;
  background-color: white;
  box-shadow: 20px 0px white;
  top: 200px;
  left: 334px;
  transform: rotate(5deg);
}
.rip::before {
  width: 4px;
  height: 43px;
  background-color: white;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: -5px;
  left: -36px;
}
.rip::after {
  width: 4px;
  height: 43px;
  background-color: white;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -5px;
  left: -36px;
}

.shirt {
  width: 74.156px;
  height: 88.499px;
  background-color: #9292B3;
  top: 292.292px;
  left: 162.612px;
  -webkit-transform: rotate(-12deg);
  -moz-transform: rotate(-12deg);
  -ms-transform: rotate(-12deg);
  -o-transform: rotate(-12deg);
  transform: rotate(-12deg);
}
.shirt::before {
  width: 29.363px;
  height: 23.387px;
  background-color: #9292B3;
  top: -23px;
}
.shirt::after {
  width: 29.405px;
  height: 41.885px;
  background-color: #9292B3;
  top: -41.8px;
  right: 0px;
}

.sleeve {
  width: 29.363px;
  height: 5.6px;
  border-radius: 0 0 14.7px 14.7px;
  background-color: #7A799C;
  box-shadow: 46px -15px #7A799C;
  top: 273px;
  left: 149px;
  -webkit-transform: rotate(-15deg);
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

.arm {
  width: 45.025px;
  height: 159.56px;
  background-color: #BCD287;
  top: 222px;
  left: 171px;
  -webkit-transform: rotate(-12deg);
  -moz-transform: rotate(-12deg);
  -ms-transform: rotate(-12deg);
  -o-transform: rotate(-12deg);
  transform: rotate(-12deg);
}
.arm::before {
  width: 12px;
  height: 12px;
  border-bottom-right-radius: 12px;
  background-color: #D3E5A4;
  box-shadow: 0px 12px #D3E5A4;
  top: 12px;
  left: 4px;
}
.arm::after {
  width: 10px;
  height: 28px;
  background-color: #5B818B;
  top: 10px;
  left: -5px;
}

.hand {
  width: 60px;
  height: 57.711px;
  background-color: #BCD287;
  border-bottom-left-radius: 20px;
  top: 169.434px;
  left: 132.5px;
  -webkit-transform: rotate(-12deg);
  -moz-transform: rotate(-12deg);
  -ms-transform: rotate(-12deg);
  -o-transform: rotate(-12deg);
  transform: rotate(-12deg);
}
.hand::before {
  width: 30.087px;
  height: 20px;
  border-bottom-right-radius: 20px;
  background-color: #BCD287;
  right: -28px;
  bottom: 0px;
}
.hand::after {
  width: 15.357px;
  height: 47.156px;
  background-color: #BCD287;
  box-shadow: -32.113px -27px #BCD287, -15.98px 8px 0 -1px #BCD287;
  right: 0px;
  top: -19px;
}

.fingers {
  width: 32px;
  height: 15px;
  border-bottom-left-radius: 15px;
  background-color: #BCD287;
  box-shadow: -40px 13px #BCD287;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 131px;
  left: 149px;
}
.fingers::before {
  width: 32px;
  height: 15px;
  border-bottom-left-radius: 15px;
  background-color: #BCD287;
  top: 49px;
  left: -22px;
  -webkit-transform: rotate(-42deg);
  -moz-transform: rotate(-42deg);
  -ms-transform: rotate(-42deg);
  -o-transform: rotate(-42deg);
  transform: rotate(-42deg);
}
.fingers::after {
  width: 15.357px;
  height: 47.156px;
  background-color: #BCD287;
  -webkit-transform: rotate(-65deg);
  -moz-transform: rotate(-65deg);
  -ms-transform: rotate(-65deg);
  -o-transform: rotate(-65deg);
  transform: rotate(-65deg);
  top: 34px;
  left: 13px;
}

.bones {
  width: 13px;
  height: 3px;
  border-radius: 50%;
  background-color: #D3E5A4;
  box-shadow: 41px 50px 0 3px #D3E5A4;
  top: 158px;
  left: 153.5px;
  -webkit-transform: rotate(-15deg);
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  transform: rotate(-15deg);
}
.bones::before {
  width: 8px;
  height: 9px;
  border-radius: 0 0 3px 3px;
  background-color: white;
  box-shadow: 41.5px 51px white;
  top: -8px;
  left: 2.5px;
}
.bones::after {
  width: 8.468px;
  height: 8.468px;
  border-radius: 50%;
  background-color: white;
  box-shadow: 5.234px 0px white, 41.734px 51px white, 46.734px 51px white;
  top: -12px;
}

HTML Code

<div id="zombie">
  <div class="tomb"></div>
  <div class="tomb-details"></div>
  <div class="rip"></div>
  <div class="arm"></div>
  <div class="shirt"></div>
  <div class="sleeve"></div>
  <div class="hand"></div>
  <div class="fingers"></div>
  <div class="bones"></div>
  <div class="back-dirt"></div>
  <div class="front-dirt"></div>
  <div class="dirt-details"></div>
</div>