halloween Archives - Lena Design

Happy Halloween everyone! To celebrate the spookiest day of the year I prepared the CSS/jQuery Ghost animation tutorial. To create the Halloween Ghost follow the steps below.

Add HTML
Add CSS with the CSS Animation
Add jQuery

*animation opened in the Firefox browser.
*to see the live output of the animation click here.

Step1.

Add HTML

<div id="container">
  <div class="ghost">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
    <div class="shadow"></div> 
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background, and elements:

body {
  background-color: #312244;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; 
}

#container {
  position: relative;
  z-index:10;
  color: white;
  font-size: 200px;
  text-shadow: 2px 2px black;  
}

Style the Ghost, and add an animation:

.ghost {
  position: relative;
  left:-100px;
  top:-100px;
  animation: bounce-out-down 4s ease infinite;
}

@keyframes bounce-out-down {
  0% { transform: translateY(0); }
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.top {
  position: absolute;
  background-color: #f7ede2;
  width: 109px;
  height:150px;
  border-radius: 50px 50px 0 0;
}

.top:after {
  content:"";
  position: absolute;
  background-color: #272640;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top:35px;
  left:25px;  
  
}

.top:before {
  content:"";
  position: absolute;
  background-color: #272640;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top:35px;
  left:58px; 
}

.middle {
  position: absolute; 
  background-color: #f7ede2;
  width: 25px;
  height: 40px;
  border-radius: 30px;
  top:130px;
}

.middle:after {
  content:"";
  position: absolute;
  background-color: #f7ede2;
  width: 25px;
  height: 40px;
  border-radius: 30px;
  left:28px;
  top:-5px;
}

.middle:before {
  content:"";
  position: absolute;
  background-color: #f7ede2;
  width: 25px;
  height: 40px;
  border-radius: 30px;
  left:56px;
  top:-2px;
}

.bottom {
  position: absolute;
  background-color: #f7ede2;
  width: 25px;
  height: 40px;
  border-radius: 30px;
  top:132px;
  left:84px;
}

Add the shadow with an animation:

.shadow {
  background-color: #272640;
  position: absolute;
  width: 109px;
  height:30px;
  border-radius:50%;
  top:200px;
  left:-100px;
  top:95px;
  animation: bounce 4s ease infinite;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  20% {
    opacity: 1;
    transform: scaleX(0.95);
  }
  100% {
    opacity: 0;
    transform: scaleX(1.1);
  }
}

Step 3.

Add jQuery

*Don’t forget to add the jQuery library link in the section of your document. To see how to add jQuery to HTML document click here.

$("#container").hover(function () {
    $(this).append($("<span>Boo!</span>"));
},function () {
    $(this).find('span').slideUp('fast');
});

To see the live output of the animation go to lenastanley.com.

Enjoy coding!

Halloween is coming! So it’s pumpkin time. Follow the steps below and create your own CSS spooky pumpkin!

Do you like this image? Check more images in the store.

Firstly, we will create the pumpkin with CSS and secondly, we will add some jQuery to spin the pumpkin eyes to make it more spooky!

Step1.

Add HTML

<div id="content">
  <div id="pumpkin">
    <div class="middle"></div>
    <div class="back"></div>
    <div class="stalk"></div>
    <div class="stalk2"></div>
    <div class="eyes">
      <div class="eye1"></div>
      <div class="eye2"></div>
    </div>
     <div class="smile"></div>
    <div class="smile1"></div>
    <div class="shadow"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour of the background, and the position of the elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; 
  background-color: #0b090a;
}

Style the pumpkin:

#content {
  position: relative;
}

#pumpkin {
  position: relative; 
  top:-200px;
  left:-150px;
}

.middle {
  position: absolute; 
  background-color: #ff9500;
  width: 120px;
  height:180px;
  left:147px;
  top:100px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset -5px 5px 0 rgba(0,0,0,0.07);
  z-index:10;
  
}
.middle:before {
  content:"";
  position: absolute;
  background-color: #ff9500;
  width: 120px;
  height:180px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset 5px 5px 0 rgba(0,0,0,0.07);
  left:-120px;
}

.middle:after {
  content:"";
  position: absolute;
  background-color: #ffa200;
  width: 120px;
  height:180px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset 5px 5px 0 rgba(0,0,0,0.07);
  left:-55px;
  top:15px;
}

.back {
  position: absolute; 
  background-color: #ff8800;
  width: 120px;
  height:180px;
  left:147px;
  top:100px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset -5px 5px 0 rgba(0,0,0,0.07);
  z-index:1;
  left:60px;
  top:80px;
  
}

.back:before {
  position: absolute; 
  content:"";
  background-color: #ff7b00;
  width: 120px;
  height:180px;
  left:147px;
  top:100px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset 5px 5px 0 rgba(0,0,0,0.07);
  top:0;
  left:60px;
  
  
}

 .stalk {
      background: #344e41;
      width: 35px;
      height: 35px;
      position: relative;
      text-align: center;
      transform: rotate(20deg) skew(-30deg);
      z-index: 11;
      left: 130px;   
      top: 100px;
      box-shadow: inset 5px 5px 0 rgba(0,0,0,0.07);
      border-radius:2px;
    }
    .stalk:before {
      content: "";
      position: absolute;
      border-radius:2px;
      top: 0;
      left: 0;
      height: 35px;
      width: 35px;
      background: #344e41;
      transform: rotate(135deg) ;
      box-shadow: inset 5px 5px 15px rgba(0,0,0,0.09);
    }

.stalk2 {
  position:absolute;
  width:50px;
	height:45px;
	border-top:18px solid #344e41;
	border-right:12px solid #344e41;
	border-top-right-radius:100px;
  left:90px;
  z-index:12;
  top:60px;
}

.stalk2:after {
  background-color: #26362e;
  border-radius:50%;
  content:"";
  position: absolute;
  width:10px;
  height:18px;
  top:-18px;
  left:-5px;
}

Style and animate eyes:

.eyes {
  position: absolute;
  z-index:30;
}

.eye1 {
  position: absolute;
  background-color: black;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  left: 80px;
  top:110px;
  transform-origin: center;
  box-shadow: inset -5px -5px 0 #333;
}

.eye2 {
  position: absolute;
  background-color: black;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transform-origin: center;
  left: 160px;
  top:110px;
  box-shadow: inset -5px -5px 0 #333;
}

.eye1:after {
  position: absolute;
  content:"";
  background-image: radial-gradient(circle closest-side, red,
      transparent);
  width: 30px;
  height:30px;
  border-radius:50%;
  Left: 20px;
  box-shadow: 4px 3px 40px yellow;
  animation: eye 0.7s infinite;
  
}

.eye2:after {
  position: absolute;
  content:"";
  background-image: radial-gradient(circle closest-side, red,
      transparent);
  width: 30px;
  height:30px;
  border-radius:50%;
  Left: 10px;
  box-shadow: 4px 3px 40px yellow;
  animation: eye 0.7s infinite;
  
}

@keyframes eye {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

Style smile of the pumpkin:

.smile {
  position: absolute;
  width:95px;
	height:40px;
  border-radius: 0 0 100px 100px;
  background-color: black;
	top:225px;
  left:100px;
  z-index:20;  
  box-shadow: inset 4px 3px 35px yellow;
}

.smile:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid #ffa200;
  top:-5px;
  left:10px;
}

.smile:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 25px solid #ffa200;
  top:22px;
  left:37px;
}

.smile1 {
  position: absolute;
  background-color: #ffa200;
  width: 101px;
  height: 15px;
  border-radius:50%;
  top:220px;
  z-index:34;
  left: 97px;
  
}

and add some shadow:

.shadow {
  position: absolute;
  width: 320px;
  height: 70px;
  background-color: red;
  border-radius:50%;
  left:-10px;
  top:245px;
  filter: blur(45px);
}

Step3.

Add jQuery

$("#pumpkin").mousemove(function(e) {
  var eyes = $(".eye1, .eye2");
  var x = (eyes.offset().left) + (eyes.width() / 2);
  var y = (eyes.offset().top) + (eyes.height() / 2);
  var rad = Math.atan2(e.pageX - x, e.pageY - y);
  var rot = (rad * (180 / Math.PI) * -1) + 180;
  eyes.css({
    '-webkit-transform': 'rotate(' + rot + 'deg)',
    '-moz-transform': 'rotate(' + rot + 'deg)',
    '-ms-transform': 'rotate(' + rot + 'deg)',
    'transform': 'rotate(' + rot + 'deg)'
  });
});

To see the live output of the animation go to lenastanley.com.

Enjoy coding!