Zombie CSS Code
![Zombie CSS Code Zombie CSS Code](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz8RutDeRe_vW-EH2EByo4E5HTn2Orq2m3AoJOogHUM6Qu09EsRvX6c2JwsHw21mpVxh0SWraIZbyRRI6lciyTWGJfA4F4EhucQ_ELD9ffIs9c7YJ96GJ8tE5aMCKQW2LZO1jhzW77ug/s1600/zombie-css.jpg)
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>
LIVE PREVIEW
See the Pen CSS Gallery - Zombie CSS Code by Peternak Blog (@peternakblog) on CodePen.
Credit: Adriana Hasbun