Categories
CSS JQuery

CSS Halloween Pumpkin

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

CSS 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!

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

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;
}
CSS Pumpkin

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!