#dailycssimages 18 - Vampire

dailycssimages-18-vampire.markdown

#dailycssimages 18 - Vampire

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<div class="container">
  <div class="card">
    <div class="left-web">
      <div class="upper">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
      </div>
      <div class="lower">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
      </div>
      <div class="left-support"></div>
      <div class="right-support"></div>
    </div>
    <div class="right-web">
      <div class="upper">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
      </div>
      <div class="lower">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
      </div>
      <div class="left-support"></div>
      <div class="right-support"></div>
    </div>
    <div class="hair"></div>
    <div class="face">
      <div class="left"></div>
      <div class="right"></div>
      <div class="spanner"></div>
    </div>
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="smile"></div>
    <div class="left-fang"></div>
    <div class="right-fang"></div>
    <div class="body"></div>
    <div class="collar"></div>
    <div class="bib"></div>
    <div class="star"></div>
    <div class="star-center"></div>
    <div class="button"></div>
    <div class="left-arm"></div>
    <div class="left-hand"></div>
    <div class="right-arm"></div>
    <div class="right-hand"></div>
  </div>
</div>

script.js

// Source: https://img1.etsystatic.com/000/0/5323978/il_570xN.271433309.jpg

// Source: https://img.clipartfest.com/836df4151f0c4e7c05a3f0a02d76c1b3_halloween-cute-vampire-clipart-cute-halloween-vampire-clipart_298-450.jpeg

style.css

* {
  box-sizing: border-box;
}

body {
  background-color: lightcyan;
}

.container {
  margin-top: 3em;
  margin-left: 5em;
  border: 2em solid black;
  background-color: black;
  width: 38em;
  height: 40em;
  position: absolute;
}

.card {
  background-color: darkcyan;
  width: 34em;
  height: 36em; 
  position: absolute;
  border-radius: 2em;
}

.left-web {
  
}

.left-web .left-support {
  position: absolute;
  border: 0.5em solid black;
  width: 5em;
  height: 7.9em;
  border-radius: 40%;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-60deg);
  margin-left: 4em;
  margin-top: -3.9em;
}

.left-web .right-support {
  position: absolute;
  border: 0.5em solid black;
  width: 5em;
  height: 7.5em;
  border-radius: 40%;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-20deg);
  margin-left: -3em;
  margin-top: 1em;
}

.left-web .lower .two {
  border: 0.5em solid black;
  width: 9.3em; 
  height: 5.2em;
  position: absolute;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  margin-top: 3.8em;
  margin-left: 1.3em;
  transform: rotate(-30deg);
}

.left-web .lower .one {
  border: 0.5em solid black;
  width: 3.7em; 
  height: 5em;
  position: absolute;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  margin-top: 5.9em;
  margin-left: -1.1em;
  transform: rotate(7deg);
}

.left-web .lower .three {
  border: 0.5em solid black;
  width: 4.9em; 
  height: 3em;
  position: absolute;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right: transparent;
  margin-top: 0.6em;
  margin-left: 7em;
  transform: rotate(-70deg);
}

.left-web .upper .two {
  border: 0.5em solid black;
  width: 5.2em; 
  height: 5.2em;
  position: absolute;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  margin-top: 0.9em;
  margin-left: 0.8em;
  transform: rotate(-30deg);
}

.left-web .upper .one {
  border: 0.5em solid black;
  width: 2.3em; 
  height: 2.3em;
  position: absolute;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  margin-top: 2.4em;
  margin-left: -0.5em;
  transform: rotate(-30deg);
}

.left-web .upper .three {
  border: 0.5em solid black;
  width: 3.4em; 
  height: 3.4em;
  position: absolute;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  margin-top: -0.8em;
  margin-left: 3.7em;
  transform: rotate(-50deg);
}

.right-web {
  transform: rotate(90deg);
  margin-left: 34em;
  margin-top: 0em;
  position: absolute;
}

.right-web .left-support {
  position: absolute;
  border: 0.5em solid black;
  width: 5em;
  height: 7.9em;
  border-radius: 40%;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-60deg);
  margin-left: 4em;
  margin-top: -3.9em;
}

.right-web .right-support {
  position: absolute;
  border: 0.5em solid black;
  width: 5em;
  height: 7.5em;
  border-radius: 40%;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-20deg);
  margin-left: -3em;
  margin-top: 1em;
}

.right-web .lower .two {
  border: 0.5em solid black;
  width: 9.3em; 
  height: 5.2em;
  position: absolute;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  margin-top: 3.8em;
  margin-left: 1.3em;
  transform: rotate(-30deg);
}

.right-web .lower .one {
  border: 0.5em solid black;
  width: 3.7em; 
  height: 5em;
  position: absolute;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  margin-top: 5.9em;
  margin-left: -1.1em;
  transform: rotate(7deg);
}

.right-web .lower .three {
  border: 0.5em solid black;
  width: 4.9em; 
  height: 3em;
  position: absolute;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right: transparent;
  margin-top: 0.6em;
  margin-left: 7em;
  transform: rotate(-70deg);
}

.right-web .upper .two {
  border: 0.5em solid black;
  width: 5.2em; 
  height: 5.2em;
  position: absolute;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  margin-top: 0.9em;
  margin-left: 0.8em;
  transform: rotate(-30deg);
}

.right-web .upper .one {
  border: 0.5em solid black;
  width: 2.3em; 
  height: 2.3em;
  position: absolute;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  margin-top: 2.4em;
  margin-left: -0.5em;
  transform: rotate(-30deg);
}

.right-web .upper .three {
  border: 0.5em solid black;
  width: 3.4em; 
  height: 3.4em;
  position: absolute;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  margin-top: -0.8em;
  margin-left: 3.7em;
  transform: rotate(-50deg);
}


.hair {
  width: 20em;
  height: 17em;
  background-color: black;
  border-radius: 6em;
  margin-top: 10em;
  margin-left: 7em;
  position: absolute;
}

.face .spanner {
  width: 19.9em;
  height: 7.9em;
  background-color: snow;
  border-radius: 3em;
  margin-top: 19.1em;
  margin-left: 7.1em;
  position: absolute;
  z-index: 1;
}

.face .right {
  width: 12em;
  height: 10em;
  background-color: snow;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  transform: rotate(-60deg);
  margin-left: 15.7em;
  margin-top: 16em;
}

.face .left {
  width: 12em;
  height: 10em;
  background-color: snow;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  transform: rotate(60deg);
  margin-left: 6.3em;
  margin-top: 16em;
}

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

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

.smile {
  width: 3em;
  height: 5.5em;
  border-radius: 50%;
  border: 0.3em solid black;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  position: absolute;
  margin-left: 15.5em;
  margin-top: 20em;
  z-index: 3;
  transform: rotate(80deg);
}

.left-fang {
  width: 0; 
  height: 0; 
  border-top: 23px solid black;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  position: absolute;
  top: 24em;
  left: 15em;
  z-index: 3;
  transform: rotate(7deg);
}

.left-fang:after{
  content:'';
  width: 0; 
  height: 0; 
  border-top: 18px solid snow;
  border-left: 6.8px solid transparent;
  border-right: 6.8px solid transparent; 
  position: absolute;
  top: -1.2em;
  left: -0.4em;
  z-index: 3;
}

.right-fang {
  width: 0; 
  height: 0; 
  border-top: 23px solid black;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  position: absolute;
  top: 23.5em;
  left: 18.2em;
  z-index: 3;
  transform: rotate(-30deg);
}

.right-fang:after{
  content:'';
  width: 0; 
  height: 0; 
  border-top: 18px solid snow;
  border-left: 6.8px solid transparent;
  border-right: 6.8px solid transparent; 
  position: absolute;
  top: -1.2em;
  left: -0.4em;
  z-index: 3;
}

.body {
  position: absolute;
  width: 0;
	height: 0;
	border-left: 8em solid transparent;
	border-right: 8em solid transparent;
	border-bottom: 20em solid black;
  z-index: 0;
  margin-top: 17em;
  margin-left: 9em;
}

.collar {
  width: 8.8em;
  border: 0.5em solid goldenrod;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  position: absolute;
  border-radius: 50%;
  margin-top: 26.5em;
  margin-left: 12.6em;
  z-index: 15;
}

.bib {
  width: 0;
	height: 0;
	border-left: 58px solid transparent;
	border-right: 58px solid transparent;
	border-top: 150px solid white;
  position: absolute;
  margin-top: 26em;
  margin-left: 13.5em;
}

.star {
  background: black;
  width: 40px;
  height: 40px;
  position: absolute;
  margin-top: 29em;
  margin-left: 15.8em;
  text-align: center;
  -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
     -ms-transform: rotate(20deg);
      -o-transform: rotate(20eg);
}
.star:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: black;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
}

.star-center {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background-color: goldenrod;
  margin-left: 16em;
  position: absolute;
  margin-top: 29.2em;
  z-index: 5;
}

.button {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: black;
  margin-left: 16.6em;
  position: absolute;
  margin-top: 32.7em;
  z-index: 5;
}

.left-arm {
  width: 3em;
  height: 9em;
  background-color: black;
  position: absolute;
  transform: rotate(-50deg);
  margin-left: 6.5em;
  margin-top: 25em;
  z-index: 2;
}

.left-hand {
  width: 2.7em;
  height: 5em;
  border-radius: 5em;
  background-color: snow;
  position: absolute;
  transform: rotate(-50deg);
  margin-left: 2.9em;
  margin-top: 23.9em;
  z-index: 1;
}

.right-arm {
  width: 3em;
  height: 9em;
  background-color: black;
  position: absolute;
  transform: rotate(50deg);
  margin-left: 24.5em;
  margin-top: 25.3em;
  z-index: 2;
}

.right-hand {
  width: 2.7em;
  height: 5em;
  border-radius: 5em;
  background-color: snow;
  position: absolute;
  transform: rotate(50deg);
  margin-left: 28.5em;
  margin-top: 24.1em;
  z-index: 1;
}