#dailycssimages 16 - Frankenstein

dailycssimages-16-frankenstein.markdown

#dailycssimages 16 - Frankenstein

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<div class="container">
  <div class="frank">
    <div class="hair">
      <div class="hair-upper-one"></div>
      <div class="hair-upper-two"></div>
      <div class="hair-top"></div>
      <div class="hair-outer-left"></div>
      <div class="hair-inner-one"></div>
      <div class="hair-inner-two"></div>
      <div class="hair-inner-three"></div>
      <div class="hair-inner-four"></div>
      <div class="hair-outer-right"></div>
    </div>
    <div class="left-ear-outer">
      <div class="inner"></div>
    </div>
    <div class="right-ear-outer">
      <div class="inner"></div>
    </div>
    <div class="head">
      <div class="left-eye">
        <div class="iris"></div>
        <div class="pupil"></div>
        <div class="large-shine"></div>
        <div class="small-shine"></div>
      </div>
      <div class="right-eye">
        <div class="iris"></div>
        <div class="pupil"></div>
        <div class="large-shine"></div>
        <div class="small-shine"></div>
      </div>
      <div class="nose"></div>
      <div class="smile"></div>
      <div class="scar-left">
        <div class="horizontal"></div>
        <div class="vertical-one"></div>
        <div class="vertical-two"></div>
        <div class="vertical-three"></div>
      </div>
      <div class="scar-right">
        <div class="horizontal"></div>
        <div class="vertical-one"></div>
        <div class="vertical-two"></div>
        <div class="vertical-three"></div>
      </div>
    </div>
    <div class="bolt-left">
      <div class="bolt-outer"></div>
      <div class="bolt-inner"></div>
    </div>
    <div class="bolt-right">
      <div class="bolt-outer"></div>
      <div class="bolt-inner"></div>
    </div>
    <div class="shoulders"></div>
    <div class="shirt"></div>
  </div>
</div>

script.js

// Source Head: https://img.clipartfest.com/2912677ad372f7ef0d182ee4439e1c8f_frankenstein-clipart-3-frankenstein-clipart_432-432.png

// Source Body: http://weclipart.com/gimg/4A1D0377B5415ACF/2a52e49761ead32973010b5983952f8e.jpg

style.css

* {
  box-sizing: border-box;
}

body {
  background-color: lightcyan;
}

.container {
  width: 50em;
  height: 50em;
  margin-left: 5em;
  margin-top: 5em;
}

.frank {
  margin-left: 2em;
  margin-top: 2em;
}

.hair-outer-left {
  width: 1em;
  height: 7em;
  background-color: black;
  position: absolute;
  border-bottom-right-radius: 80%;
  z-index: 2;
}

.hair-top {
  width: 15em;
  height: 3em;
  background-color: black;
  position: absolute;
  z-index: 2;
}

.hair-inner-one {
  width: 3em;
  height: 4em;
  background-color: black;
  position: absolute;
  transform: rotate(50deg);
  margin-left: 1em;
  margin-top: 1em;
  z-index: 2;
}

.hair-inner-two {
  width: 3em;
  height: 4em;
  background-color: black;
  position: absolute;
  transform: rotate(30deg);
  margin-left: 4.5em;
  margin-top: 0.5em;
  z-index: 2;
}

.hair-inner-three {
  width: 3em;
  height: 4em;
  background-color: black;
  position: absolute;
  transform: rotate(30deg);
  margin-left: 7em;
  margin-top: 0.5em;
  z-index: 2;
}

.hair-inner-four {
  width: 2em;
  height: 3em;
  background-color: black;
  position: absolute;
  transform: rotate(40deg);
  margin-left: 11em;
  margin-top: 1em;
  z-index: 2;
}

.hair-outer-right {
  width: 1em;
  height: 7em;
  background-color: black;
  position: absolute;
  border-bottom-left-radius: 80%;
  margin-left: 14em;
  z-index: 2;
}

.left-ear-outer {
  position: absolute;
  margin-left: -3em;
  margin-top: 5em;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  background-color: olivedrab;
  z-index: -1;
}

.left-ear-outer .inner {
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background-color: darkolivegreen;
  margin-left: 0.5em;
  margin-top: 0.7em;
  z-index: 0;
}

.right-ear-outer {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  background-color: olivedrab;
  position: absolute;
  margin-left: 13.5em;
  margin-top: 5em;
  z-index: -1;
}

.right-ear-outer .inner {
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background-color: darkolivegreen;
  margin-left: 0.9em;
  margin-top: 0.7em;
  z-index: 0;
}

.head {
  width: 15em;
  height: 15em;
  background-color: olivedrab;
  border-radius: 1.5em;
  z-index: 1;
  position: absolute;
}

.left-eye {
  width: 7em;
  height: 7em;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  background-color: snow;
  margin-top: 5em;
  margin-left: 1em;
  box-shadow: inset 20px 0px 20px 0px rgba(0,0,0,0.2);
}

.left-eye .iris {
  width: 4em;
  height: 4em;
  border-radius: 50%;
  position: absolute;
  z-index: 3;
  background-color: darkorange;
  margin-top: 2em;
  margin-left: 2em;
}

.left-eye .pupil {
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  position: absolute;
  z-index: 4;
  background-color: black;
  margin-top: 3.2em;
  margin-left: 3em;
}

.left-eye .large-shine {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  position: absolute;
  z-index: 5;
  background-color: snow;
  margin-top: 1.5em;
  margin-left: 2.5em;
}

.left-eye .small-shine {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  z-index: 5;
  background-color: snow;
  margin-top: 3em;
  margin-left: 4.5em;
}

.right-eye {
  width: 5.5em;
  height: 5.5em;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  background-color: snow;
  margin-top: 6em;
  margin-left: 8.5em;
  box-shadow: inset 20px 0px 20px 0px rgba(0,0,0,0.2);
  transform: rotate(180deg);
}

.right-eye .iris {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  position: absolute;
  z-index: 3;
  background-color: darkorange;
  margin-top: 1em;
  margin-left: 2em;
}

.right-eye .pupil {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  position: absolute;
  z-index: 4;
  background-color: black;
  margin-top: 1.3em;
  margin-left: 2.7em;
}

.right-eye .large-shine {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  z-index: 5;
  background-color: snow;
  margin-top: 3.3em;
  margin-left: 2.1em;
}

.right-eye .small-shine {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  position: absolute;
  z-index: 5;
  background-color: snow;
  margin-top: 2.7em;
  margin-left: 4em;
}

.nose {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border-color: grey;
  position: absolute;
  z-index: 3;
  margin-top: 10em;
  margin-left: 7.5em;
  box-shadow: inset 5px 0px 5px 0px rgba(0,0,0,0.2);
  transform: rotate(320deg);
}

.smile {
  border: 2px solid #000; /* the 'strokes' of the arc */
  display: inline-block;
  min-width: 4em; /* the width of the innermost element */
  min-height: 4em; /* the height of the innermost element */
  padding: 0.5em; /* the spacing between each arc */
  border-radius: 50%; /* for making the elements 'round' */
  border-right-color: transparent; /* hide right border */
  border-left-color: transparent;
  border-top-color: transparent;
  position: absolute;
  margin-top: 10em;
  margin-left: 6em;
}

.scar-left {
  background-color: darkolivegreen;
  z-index: 5;
  position: absolute;
  margin-left: 10em;
  transform: rotate(20deg);
  margin-top: 5em;
}

.horizontal {
  width: 4em;
  height: 0.3em;
}

.vertical-one {
  width: 0.3em;
  height: 1.7em;
  background-color: darkolivegreen;
  position: absolute;
  margin-left: 0.7em;
  margin-top: -0.9em;
}

.vertical-two {
  width: 0.3em;
  height: 1.7em;
  background-color: darkolivegreen;
  position: absolute;
  margin-left: 1.4em;
  margin-top: -0.9em;
}

.vertical-three {
  width: 0.3em;
  height: 1.7em;
  background-color: darkolivegreen;
  position: absolute;
  margin-left: 3em;
  margin-top: -1em;
}

.scar-right {
  background-color: darkolivegreen;
  z-index: 5;
  position: absolute;
  margin-left: 1em;
  transform: rotate(-20deg);
  margin-top: 13em;
}

.bolt-left {
  transform: rotate(-3deg);
  z-index: 0;
  position: absolute;
}

.bolt-left .bolt-inner {
  z-index: 0;
  position: absolute;
  margin-left: -1.6em;
  margin-top: 12em;
}

.bolt-left .bolt-outer {
  margin-left: -3.4em;
  margin-top: 11.2em;
  position: absolute;
  z-index: 0;
  border-top-right-radius: 40%;
  border-bottom-right-radius: 40%;
}

.bolt-right {
  transform: rotate(3deg);
  z-index: 0;
  position: absolute;
  margin-top: -0.6em;
}

.bolt-right .bolt-inner {
  z-index: 0;
  position: absolute;
  margin-left: 14.7em;
  margin-top: 12em;
}

.bolt-right .bolt-outer {
  margin-left: 16.6em;
  margin-top: 11.2em;
  position: absolute;
  z-index: 0;
  border-top-left-radius: 40%;
  border-bottom-left-radius: 40%;
}

.bolt-inner {
  width: 2em;
  height: 1.5em;
  background-color: darkolivegreen;
}

.bolt-outer {
  width: 2em;
  height: 3em;
  background-color: darkolivegreen;
}

.shoulders {
  width: 10em;
  height: 7em;
  background-color: black;
  border-top-left-radius: 60%;
  border-top-right-radius: 60%;
  position: absolute;
  z-index: -1;
  margin-top: 14em;
  margin-left: 2.7em;
}

.shirt {
  width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid darkorchid;
  margin-top: 14em;
  margin-left: 4.5em;
  position: absolute;
}