#dailycssimages 17 - Zombie

dailycssimages-17-zombie.markdown

#dailycssimages 17 - Zombie

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<div class="container">
  <div class="zombie">
    <div class="head"></div>
    <div class="hair"></div>
    <div class="brains">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="left-eyebrow"></div>
    <div class="left-eye"></div>
    <div class="right-eyebrow"></div>
    <div class="right-eye"></div>
    <div class="mouth"></div>
    <div class="top-tooth"></div>
    <div class="bottom-left-tooth"></div>
    <div class="bottom-right-tooth"></div>
    <div class="tongue"></div>
    <div class="blood">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="body"></div>
    <div class="chest-cavity"></div>
    <div class="top-rib"></div>
    <div class="middle-rib"></div>
    <div class="bottom-rib"></div>
    <div class="stomach"></div>
    <div class="left-arm"></div>
    <div class="left-arm-bone"></div>
    <div class="right-arm"></div>
    <div class="pants"></div>
    <div class="left-pant-rip"></div>
    <div class="left-leg"></div>
    <div class="crotch"></div>
    <div class="right-pant-rip-one"></div>
    <div class="right-pant-rip-two"></div>
    <div class="right-leg-bone"></div>
  </div>
</div>

style.css

* {
  box-sizing: border-box;
}

body {
  background-color: lightcyan;
}

.container {
  position: absolute;
  margin-left: 5em;
  margin-top: 5em;
}

.zombie {
  margin-left: 5em;
  position: absolute;
}

.head {
  width: 8em;
  height: 9em;
  background-color: palegreen;
  border-top-left-radius: 3em;
  border-top-right-radius: 3em;
  border-bottom-left-radius: 2em;
  border-bottom-right-radius: 2em;
  border: 0.3em solid black;
  position: absolute;
}

.hair {
  
}

.brains {
  width: 4em;
  height: 2em;
  background-color: deeppink;
  border-top-left-radius: 2em;
  border-top-right-radius: 2em;
  border-bottom-left-radius: 3em;
  border-bottom-right-radius: 3em;
  border-bottom: 0.3em solid black;
  border-top: transparent;
  position: absolute;
  transform: rotate(25deg);
  margin-left: 4.3em;
  margin-top: 0.5em;
}

.brains div {
  border: 0.2em solid #000;
  display: inline;
  min-width: 1em;
  min-height: 1.2em;
  padding: 0.5em;
  border-radius: 100%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  z-index: 3;
  transform: rotate(-25deg);
  background-color: deeppink;
}

.brains div:nth-child(1) {
  margin-left: 0.8em;
  margin-top: -0.3em;
}

.brains div:nth-child(2) {
  margin-left: 1.7em;
  margin-top: -0.3em;
}

.brains div:nth-child(3) {
  margin-left: 2.6em;
  margin-top: -0.3em;
}

.brains div:nth-child(4) {
  margin-left: 0em;
  margin-top: -0.3em;
}

.brains div:nth-child(5) {
  margin-left: 1.5em;
  margin-top: 0.4em;
}

.left-eyebrow {
  border: 0.2em solid #000;
  width: 1.7em;
  height: 1em;
  border-radius: 40%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  z-index: 3;
  transform: rotate(-25deg);
  margin-top: 2.3em;
  margin-left: 1em;
}

.left-eye {
  width: 2.5em;
  height: 2.5em;
  border-radius: 100%;
  border: 0.3em solid black;
  position: absolute;
/*   background-color: lemonchiffon; */
  margin-top: 3em;
  margin-left: 1em;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefcea+0,eddd74+100 */
background: #fefcea; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #fefcea 0%, #eddd74 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #fefcea 0%,#eddd74 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #fefcea 0%,#eddd74 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#eddd74',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.right-eyebrow {
  border: 0.2em solid #000;
  width: 1.7em;
  height: 1em;
  border-radius: 40%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  z-index: 3;
  transform: rotate(25deg);
  margin-top: 2.3em;
  margin-left: 5.3em;
}

.right-eye {
  width: 2em;
  height: 2em;
  border-radius: 100%;
  border: 0.3em solid black;
  position: absolute;
/*   background-color: lemonchiffon; */
  margin-top: 3.3em;
  margin-left: 4.5em;
  background: #fefcea; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  #fefcea 0%, #eddd74 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover,  #fefcea 0%,#eddd74 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center,  #fefcea 0%,#eddd74 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#eddd74',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.mouth {
  height: 2em;
  width: 4em;
  background-color: firebrick;
  border-radius: 3em 1em 9em 8em; 
    -moz-border-radius: 3em 1em 9em 8em;
    -webkit-border-radius: 3em 1em 9em 8em;
	border: 0.3em solid #000;
	z-index: 10; 
  position: absolute;
  margin-top: 6em;
  margin-left: 2em;
  transform: rotate(-5deg);
	  -webkit-transform: rotate(-5deg);
	  -moz-transform: rotate(-5deg);
}

.top-tooth {
  height: 0.7em;
  width: 0.8em;
  position: absolute;
  z-index: 11;
  background-color: snow;
  margin-left: 4.2em;
  margin-top: 6em;
  border: 0.3em solid black;
  border-radius: 1em;
  transform: rotate(5deg);
}

.bottom-left-tooth {
  height: 1em;
  width: 1.3em;
  position: absolute;
  z-index: 11;
  background-color: snow;
  margin-left: 2.5em;
  margin-top: 6.9em;
  border: 0.3em solid black;
  border-radius: 1em;
  transform: rotate(15deg);
}

.bottom-right-tooth {
  height: 1em;
  width: 1.2em;
  position: absolute;
  z-index: 11;
  background-color: snow;
  margin-left: 4.4em;
  margin-top: 6.7em;
  border: 0.3em solid black;
  border-radius: 1em;
  transform: rotate(-10deg);
}

.tongue {
  height: 1em;
  width: 3em;
  background-color: indianred;
  border-radius: 1em 1em 6em 5em; 
    -moz-border-radius: 1em 1em 6em 5em;
    -webkit-border-radius: 1em 1em 6em 5em;
	border-bottom: 0.3em solid #000;
  border-top: transparent;
	z-index: 10; 
  position: absolute;
  margin-top: 6.9em;
  margin-left: 2.5em;
  transform: rotate(-5deg);
	  -webkit-transform: rotate(-5deg);
	  -moz-transform: rotate(-5deg);
}

.blood div {
  border: 0.2em solid #000;
  display: inline;
  border-radius: 50%;
  border-top-color: transparent;
  position: absolute;
  z-index: 9;
  background-color: firebrick;
}

.blood div:nth-child(1) {
  margin-left: 2.4em;
  margin-top: 7.6em;
  width: 0.6em;
  height: 1em;
}

.blood div:nth-child(2) {
  margin-left: 3.2em;
  margin-top: 7.4em;
  width: 0.6em;
  height: 1em;
}

.blood div:nth-child(3) {
  margin-left: 4.4em;
  margin-top: 7.5em;
  width: 0.6em;
  height: 1em;
}

.body {
  width: 6em;
  height: 4em;
  background-color: palegreen;
  border-top-left-radius: 2em;
  border-top-right-radius: 2em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  border: 0.3em solid black;
  margin-left: 1em;
  position: absolute;
  margin-top: 8.3em;
  z-index: -1;
}

.chest-cavity {
  width: 2em;
  height: 3em;
  background-color: teal;
  position: absolute;
  z-index: 5;
  border-top-right-radius: 80%;
  border-bottom-left-radius: 90%;
  margin-top: 6.5em;
  margin-left: 4em;
  transform: skewY(-20deg) skewX(40deg) rotate(-90deg);
  transform-origin: bottom right;
  border: 0.2em solid black;
}

.top-rib {
  height: 0.7em;
  width: 1.1em;
  position: absolute;
  z-index: 11;
  background-color: snow;
  margin-left: 5.3em;
  margin-top: 9.6em;
  border: 0.3em solid black;
  border-radius: 0.8em;
  transform: rotate(5deg); 
}

.middle-rib {
  height: 0.7em;
  width: 2.2em;
  position: absolute;
  z-index: 11;
  background-color: snow;
  margin-left: 4.2em;
  margin-top: 10.5em;
  border: 0.3em solid black;
  border-radius: 1em;
  transform: rotate(-5deg); 
}

.left-arm {
  width: 1em;
  height: 1.5em;
  background-color: palegreen;
  border-top-left-radius: 0.2em;
  border-top-right-radius: 0.2em;
  border-bottom-left-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
  border: 0.3em solid black;
  position: absolute;
  margin-left: 0.5em;
  margin-top: 8.3em;
  transform: rotate(20deg);
  z-index: -1;
}

.left-arm-bone {
  width: 0.8em;
  height: 1.6em;
  background-color: snow;
  border-top-left-radius: 0.2em;
  border-top-right-radius: 0.2em;
  border-bottom-left-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
  border: 0.3em solid black;
  position: absolute;
  margin-left: 0.1em;
  margin-top: 9.5em;
  transform: rotate(20deg);
  z-index: -4;
}

.right-arm {
  width: 1em;
  height: 4em;
  background-color: palegreen;
  border-top-left-radius: 0.2em;
  border-top-right-radius: 0.2em;
  border-bottom-left-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
  border: 0.3em solid black;
  position: absolute;
  margin-left: 6.9em;
  margin-top: 8.3em;
  transform: rotate(-20deg);
  z-index: -1;
}

.pants {
  width: 6em;
  height: 3em;
  background-color: saddlebrown;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  border-bottom-left-radius: 0em;
  border-bottom-right-radius: 0em;
  border: 0.3em solid black;
  position: absolute;
  z-index: 12;
  margin-top: 11.5em;
  margin-left: 1em;
}

.left-pant-rip {
  width: 1em;
  height: 1em;
  border: 0.3em solid black;
  background-color: palegreen;
  border-bottom-color: transparent;
  border-right-color: transparent;
  position: absolute;
  z-index: 12;
  margin-top: 14em;
  margin-left: 1.4em;
  transform: rotate(45deg);
}

.crotch {
  width: 2.4em;
  height: 1em;
  border: 0.3em solid black;
  background-color: lightcyan;
  border-bottom-color: transparent;
  position: absolute;
  z-index: 12;
  margin-top: 13.7em;
  margin-left: 2.9em;

}

.right-pant-rip-one {
  width: 0.4em;
  height: 0.6em;
  background-color: saddlebrown;
  border-bottom: 0.2em solid black;
  border-right: 0.2em solid black;
  position: absolute;
  z-index: 12;
  margin-top: 14.1em;
  margin-left: 5.4em;
  transform: rotate(45deg);
}

.right-pant-rip-two {
  width: 0.5em;
  height: 0.6em;
  background-color: saddlebrown;
  border-bottom: 0.2em solid black;
  border-right: 0.2em solid black;
  position: absolute;
  z-index: 13;
  margin-top: 14.1em;
  margin-left: 6.2em;
  transform: rotate(50deg);
}

.left-leg {
  width: 2em;
  height: 2em;
  background-color: palegreen;
  border-top-left-radius: 0.2em;
  border-top-right-radius: 0.2em;
  border-bottom-left-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
  border: 0.3em solid black;
  position: absolute;
  margin-left: 1em;
  margin-top: 14em;
}

.right-leg-bone {
  width: 1.3em;
  height: 1.7em;
  background-color: snow;
  border-top-left-radius: 0.2em;
  border-top-right-radius: 0.2em;
  border-bottom-left-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
  border: 0.3em solid black;
  position: absolute;
  margin-left: 5.3em;
  margin-top: 14em;
}