Categories
CSS Web development

Pure CSS Halloween Pumpkin/ Jack O Lantern

Pure CSS Halloween Pumpkin/ Jack O Lantern

To learn how to create the CSS Halloween Pumpkin/ Jack O Lantern follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Halloween Pumpkin/ Jack O Lantern on the website click here.

Step1.

Add HTML

Create a pumpkin:

<div class="pumpkin">
  <div class="front"></div>
  <div class="middle"></div>
  <div class="back"></div>
  <div class="stalk"></div>
  <div class="eyes"></div>
  <div class="smile">
    <div class="smile-middle"></div>
    <div class="smile-end"></div>
  </div>
</div>

Step2.

Add CSS

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

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

.pumpkin {
  position: relative; 
}

Style the pumpkin:

.pumpkin:before {
  content:"";
  position: absolute;
  background-color: #03071e;
  width:160px;
  height: 80px;
  border-radius:50%;
  top:40px;
  left:-40px;
}

.front {
  position: relative;
  width: 80px;
  height: 110px;
  background-color: #ffba08;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 
  z-index:4;
}

.front:before {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.3);
  width:15px;
  height:20px;
  border-radius:50%;
  left: 65px;
  top:-5px;
  transform: rotate(-45deg);
}

.front:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.3);
  width:10px;
  height:15px;
  border-radius:50%;
  left:80px;
  top:-22px;
  transform: rotate(-65deg);
}

.middle {
  position: absolute;
  z-index:3;
  top:0;
}

.middle:before, .middle:after {
  content:"";
  position: absolute;
  width: 80px;
  height: 110px;
  background-color: #faa307;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;   
}

.middle:before {
  left: -35px;
  top:-10px;
  transform: rotate(10deg);
}

.middle:after {
  left:35px;
  top:-10px;
  transform: rotate(-10deg);
}

.back {
  position: absolute;
  background-color: #faa307;
  width: 80px;
  height: 110px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;   
  top:-30px;
}

.back:before, .back:after {
  content:"";
  position: absolute;
  background-color: #f48c06;
  width: 80px;
  height: 110px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;   
}

.back:before {
  left:-45px;
  top:0;
  transform: rotate(20deg);
}

.back:after {
  left:45px;
  top:0;
  transform: rotate(-20deg);
}

.stalk {
  position: absolute;
  z-index:2;
  background-color: #55a630;
  width: 40px;
  height:20px;
  border-radius: 30px 30px 0 0;
  top:-15px;
  left:5px;
  box-shadow: 30px 0 #55a630;
}

.stalk:before {
  content:"";
  position: absolute;
  border-left: 8px solid #55a630;
  border-top: 14px solid #55a630;
  border-bottom: 9px solid transparent;
  border-right: 9px solid transparent;
  width: 50px;
  height: 50px;
  border-radius:100px;
  top:-35px;
  left:30px;
  transform: rotate(-30deg);
}

.stalk:after {
  content:"";
  position: absolute;
  background-color: #80b918;
  width:8px;
  height:12px;
  border-radius: 50%;
  top:-34px;
  left:68px;
}
CSS Pumpkin

Add eyes and smile:

.eyes {
  position: absolute;
  z-index:4;
  top:105px;
}

.eyes:before, .eyes:after {
  content:"";
  position: absolute;
  width: 32px;
  height: 32px;
  background-color: #03071e;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% 
}

.eyes:before {
  top:-80px;
  left:-5px;
  transform: rotate(20deg);
}

.eyes:after {
  top:-80px;
  left:50px;
  transform: rotate(-20deg);
}

.smile {
  position: absolute;
  z-index:5;  
  top:105px;
}

.smile:before, .smile:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
}

.smile:before {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 35px solid #03071e;
  top:-50px;
  transform: rotate(-45deg);
}

.smile:after {
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #03071e;
  top:-27px;
  left:22px;
}

.smile-middle {
  position: absolute;
}

.smile-middle:before, .smile-middle:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
}

.smile-middle:before {
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #03071e;
  top:-40px;
  left:10px;
}

.smile-middle:after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 35px solid #03071e;
  left:55px;
  top:-50px;
  transform: rotate(45deg);
}

.smile-end {
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #03071e;
  top:-40px;
  left:30px;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Halloween Ghost Animation

CSS Spooky House Animation

CSS Scarecrow

Categories
CSS Web development

CSS Halloween Animation on Hover: Dracula/ Vampire

CSS Halloween Animation on Hover:  Dracula/ Vampire

To learn how to create the CSS Halloween Animation: Dracula/ Vampire follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

Create the Vampire:

<div class="halloween">
  <div class="dracula">
    <div class="head">
      <div class="sides"></div>
      <div class="teeth"></div>
      <div class="eyes"></div>
      <div class="eyelids"></div>
    </div>
    <div class="ears"></div>
    <div class="collar"></div>
    <div class="arms"></div>
    <div class="text">Happy Halloween!</div>
  </div>
</div>

Step2.

Add CSS

Import the font (source: https://fonts.google.com/):

@import url('https://fonts.googleapis.com/css2?family=Freckle+Face&display=swap');

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

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #542f63;
  overflow: hidden;
}

.halloween {
  position: relative;
}

.dracula {
  position: relative;
  cursor: pointer;
  top:-50px;
}

Style the vampire:

.head {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background-color: black;
  box-shadow: inset 20px -20px #c7c2e0;
  z-index:3;
}

.head:before, .head:after {
  content:"";
  position: absolute;
  background-color: #c7c2e0;
  width:110px;
  height:110px;
  border-radius:50%;
}

.head:before {
  left:-55px;
}

.head:after {
  left:45px;
}

.sides {
  background-color: black;
  border-radius:50%;
  position: absolute;
  width:50px;
  height:50px;
  left:-20px;
  top:-20px;
  box-shadow: 90px 0px black;
  z-index:3;
}

.sides:before {
  content:"";
  position: absolute;
  background-color: black;
  width: 35px;
  height:5px;
  top:90px;
  left:50px;
}

.sides:after {
  content:"";
  position: absolute;
  width:5px;
  height:20px;
  background-color: #f11828;
  top:95px;
  left:78px;
  border-radius:0 0 10px 10px;
  animation: drip 3s linear infinite;
}

@keyframes drip {
  0% {height:20px;}
  10% {height:20px;}
  30% {height:30px;}
  50% {height:25px;}
  70% {height:20px;}
  85% {height:10px;}
  100% {height:20px;}
}

.teeth, .teeth:before {
  position: absolute;
  width:0;
  height:0;
  border-bottom: 10px solid transparent;
}

.teeth {
  border-right: 10px solid black;
  top:73px;
  left:30px;
  z-index:4;
}

.teeth:before {
  content:"";
  border-left: 10px solid black;
  left:25px;
}

.eyes {
  position: absolute;
  border-radius:50%;
  width:33px;
  height: 33px;
  background-color: white;
  top:32px;
  left:18.5px;
  z-index:2;
  box-shadow: 30px 0 white;
}

.eyes:before, .eyes:after {
  content:"";
  position: absolute;
  border-radius:50%;
}

.eyes:before {
  background-color: #ed439d;
  width:25px;
  height:25px;
  top:5px;
  left:7px;
  box-shadow:25px 0 #ed439d;
}

.eyes:after {
  background-color: #7d203a;
  width:15px;
  height:15px;
  top:10px;
  left:13px;
  box-shadow: 24px 0 #7d203a;
}

.eyelids {
  position: absolute;
  background-color: black;
  width: 25px;
  height: 10px;
  border-radius: 100px 100px 0 0;
  top:30px;
  left:27px;
  transform: rotate(20deg);
  z-index:4;
}

.eyelids:before {
  content:"";
  position: absolute;
  background-color: black;
  width: 25px;
  height: 10px;
  border-radius: 100px 100px 0 0;
  transform: rotate(-40deg);
  left:20px;
  top:-7px;
}

.ears {
  position: absolute;
  background-color: #9e8dc3;
  width:50px;
  height: 25px;
  border-radius: 0 0 100px 100px;
  top:40px;
  left:-30px;
  transform: rotate(40deg);
  z-index:2;
}

.ears:before {
  content:"";
  position: absolute;
  background-color: #9e8dc3;
  width:50px;
  height: 25px;
  border-radius: 0 0 100px 100px;
  transform: rotate(-80deg);
  left:83px;
  top:-70px;
}

.collar {
  position: absolute;
  background-color: black;
  width: 150px;
  height: 75px;
  border-radius: 0 0 100px 100px;
  top:55px;
  left:-25px;
  z-index:1;
}

.collar:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 30px solid #1a0e36;
  left:55px;
  top:40px;
}

.collar:before {
  content:"";
  position: absolute;
  width:80px;
  height:0;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  border-bottom: 180px solid black;
  top:30px;
  left:10px;
}

.arms {
  position: absolute;
  width:100px;
  height:0;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  border-bottom: 155px solid #1a0e36;
  left:-25px;
  transition: .2s;
}
CSS Vampire

Style the text:

.text {
  position: absolute;
  z-index:5;
  text-align: center;
  font-family: 'Freckle Face', cursive;
  font-size: 50px;
  color: #f11828;
  top:120px;
  left:-50px;
  opacity:0;
  transition: .2s;
}

Animate elements (cloak and text) on Hover:

.dracula:hover .arms {
  transform: scaleX(2);
}
.dracula:hover .text {
  opacity:1;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Halloween Ghost Animation

CSS Spooky House Animation

CSS Scarecrow

Categories
CSS Web development

CSS Halloween Ghost Animation

CSS ghost

Happy Halloween everyone! To celebrate the spookiest day of the year I prepared the CSS Ghost animation.

To create the CSS Halloween Ghost animation follow the steps below and watch the video tutorial.

  1. Add HTML
  2. Add CSS

Demo:

*to see the CSS Halloween Ghost Animation on the website click here.

Step1.

Add HTML

<div class="halloween">
  <div class="ghost">
    <div class="eyes"></div>
    <div class="smile"></div>
    <div class="text">BOO!</div>
  </div>
</div>

Step2.

Add CSS

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

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

.halloween {
  position: relative;
}
.halloween:before {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  width:140px;
  height:20px;
  border-radius:50%;
  top:250px;
}

Style the Ghost:

.ghost {
  position: relative;
  height:180px;
  width:140px;
  border-radius:100px 100px 0 0;
  background-color: #f7ede2;
  transition: .2s;
}

.ghost:before {
  content:"";
  position: absolute;
  width:20px;
  height:70px;
  border-radius:30px;
  background-color: #f7ede2;
  top:130px;
  box-shadow: 20px 40px #333,40px 10px #f7ede2,60px 40px #333,80px -10px #f7ede2,100px 40px #333, 120px 0 #f7ede2;
}

.ghost:after {
  content:"";
  position: absolute;
  border-radius:50%;
  width:40px;
  height:40px;
  background-color: #333;
  top:50px;
  left:33px;
  box-shadow:41px 0 #333;
}

.eyes {
  position: absolute;
  width:10px;
  height:10px;
  background-color: #f7ede2;
  border-radius:50%;
  top:70px;
  left:80px;
  z-index:1;
  box-shadow: -24px 0 #f7ede2; 
}

.eyes:before, .eyes:after {
  content:"";
  position: absolute;
  background-color: #f7ede2;
  width:20px;
  height:70px;
  border-radius:30px;
  top:0;
}

.eyes:before {
  transform: rotate(30deg);
  left:55px;
}

.eyes:after {
  transform: rotate(-30deg);
  left:-95px;
}
.smile {
  position: absolute;
  width:40px;
  height:20px;
  border-radius:0 0 100px 100px;
  background-color: #333;
  top:95px;
  left:53px;
  transition: .2s;
}
CSS ghost

Style the text:

.text {
  position:relative;
  top:-100px;
  font-size: 100px;
  left:-40px;
  color: #f7ede2;
  display: none;
  transition: .2s ease;
}

Add a transition effect on hover:

.halloween:hover .smile {
  border-radius: 100px 100px 0 0;
  height:50px;
}

.halloween:hover .text {
  display: block;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Halloween Animations

CSS Halloween Animation on Hover: Dracula/ Vampire

Categories
CSS HTML Web development

CSS Scarecrow

CSS scarecrow

Demo:

*to see the CSS Scarecrow on the website click here.

To create the CSS Scarecrow follow the steps below:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div id="scare-crow">
<div class="circle">
  <div class="scarecrow">
    <div class="head"></div>
    <div class="hat"></div>
    <div class="eyes"></div>
    <div class="smile"></div>
    <div class="jumper"></div>
    <div class="patch"></div>
    <div class="stick"></div>
    <div class="straw"></div> 
  </div>
  </div>
</div>

Step2.

Add CSS

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

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

#scare-crow {
  position: relative;
}

.circle {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #db995a;
  box-shadow: 10px 5px 1px rgba(0,0,0,0.07);
}

.circle:before {
  content:"";
  background-color: #2a3c24;
  width: 400px;
  height:200px;
  border-radius:50%;
  top:250px;
  position:absolute;
  left:0;
}

.circle:after {
  content:"";
  position: absolute; 
  background-color: #f4ae4a;
  width: 120px;
  height: 30px;
  border-radius: 100px;
  left: 270px;
  top: 80px;
  box-shadow: -50px 30px #db995a, 20px 30px #f4ae4a, -60px 60px #f4ae4a, 30px 60px #f4ae4a, -80px 90px #db995a, 80px 90px #db995a, 10px 90px #f4ae4a, -2px 120px #f4ae4a,-280px 30px #f4ae4a, -245px 60px #db995a, -280px 60px #f4ae4a,-300px 90px #f4ae4a;
}
CSS Scarecrow

Style the Scarecrow:

.scarecrow {
  position: absolute;
}

.head {
  position: absolute; 
  background-color: #ff6d00;
  width: 60px;
  height:90px;
  left:147px;
  top:100px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  z-index:5;
}

.head:before {
  content:"";
  position: absolute;
  background-color: #ff6d00;
  width: 60px;
  height:90px;
  left:50px;
  top:0;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: inset -10px 5px 0 rgba(0,0,0,0.07);
  
}

.head:after {
  content:"";
  position: absolute;
  width: 60px;
  height:90px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background-color: #ff8500;
  left:25px;
}

.hat {
  width: 130px;
  height: 60px;
  border-radius:50%;
  position: absolute;
  background-color: #ad5015;
  top:85px;
  left: 135px;
  box-shadow: inset -20px -5px 0 rgba(0,0,0,0.07);
  z-index:10;
}

.hat:before {
  content:"";
  position: absolute;
  border-bottom: 50px solid #ad5015;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  height: 0;
  width: 50px;
  top:-30px;
  left:25px;
}

.hat:after {
  content:"";
  position: absolute;
  background-color: #ad5015;
  border-radius:50%;
  width:50px;
  height:15px;
  top:-38px;
  left:40px;
  box-shadow: inset -5px -5px 0 rgba(0,0,0,0.07);
}

.eyes {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 17px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid black;
  left:170px;
  top:150px;
  z-index:7;
}

.eyes:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 17px solid transparent;
  border-top: 12px solid black;
  left:20px;
  top:-12px;
  
}

.smile {
  position: absolute;
  background-color: black;
  width: 35px;
  height: 13px;
  border-radius: 0 0 100px 100px;
  left:185px;
  top:170px;
  z-index:7;
}

.smile:before {
  content:"";
  position: absolute; 
  background-color: #ff8500;
  width: 7px;
  height: 9px;
  top:-5px;
  left:7px;
}

.smile:after {
  content:"";
  position: absolute; 
  background-color: #ff8500;
  width: 7px;
  height: 9px;
  left:18px;
  top:8px;
}

.jumper {
  position: absolute;
  background-color: #4059ad;
  width:250px;
  height: 50px;
  z-index:2;
  top: 160px;
  left:75px;
  border-radius: 0 0 30px 30px;
}

.jumper:before {
  content:"";
  position: absolute;
  background-color: #4059ad;
  border-radius: 0 0 30px 0;
  width: 150px;
  height: 140px;
  left:55px;
}

.jumper:after {
  content:"";
  position: absolute;
  background-color: #4059ad;
  width: 30px;
  height:80px;
  border-radius: 0 0 20px 0;
  top:90px;
  left:55px;
    
}

.stick {
  z-index:1;
  width: 15px;
  height: 100px;
  background-color: #57240f;
  position: absolute;
  top:300px;
  left:195px;
  box-shadow: inset 10px 5px 0 rgba(0,0,0,0.07);
}

.stick:before {
  content:"";
  position: absolute;
  width: 300px;
  box-shadow: inset 10px 5px 0 rgba(0,0,0,0.07);
  background-color: #57240f;
  height: 15px;
  top:-140px;
  left:-145px;
  border-radius:10px;
}

.stick:after {
  content:"";
  position: absolute; 
  background-color: #deb841;
  width:5px;
  height:45px;
  border-radius: 10px;
  left: 20px;
  top: 60px;
  transform: rotate(20deg);
  
}

.straw {
  position: absolute;
  background-color: #deb841;
  width:5px;
  height: 45px;
  top: 360px;
  border-radius: 10px;
  left: 200px;
  z-index:1;
  
}

.straw:before {
  content:"";
  position: absolute;
  background-color: #deb841;
  width:5px;
  height: 45px;
  border-radius:10px;
  left:-25px;
  transform:rotate(-20deg);
  
}

.straw:after {
  content:"";
  position: absolute;
  background-color: #deb841;
  width:45px;
  top:-190px;
  height: 5px;
  border-radius:10px;
  left:-140px;
  transform: rotate(-30deg);
  
}

.patch {
  position: absolute; 
  width: 30px;
  height: 40px;
  background-color: #d7263d;
  left: 230px;
  top:230px;
  z-index:2;
  box-shadow: inset 10px 5px 0 rgba(0,0,0,0.07);
  
}

.patch:after {
  content:"";
  position: absolute;
  background-color: black;
  width:2px;
  height: 15px;
  left:5px;
  top:-5px;
  
}

.patch:before {
  content:"";
  position: absolute;
  background-color: black;
  width:2px;
  height: 8px;
  left: 20px;
  top:37px;
  
}
CSS scarecrow

To see the live output of the code above go to lenastanley.com.

Enjoy coding!

Read also:

CSS Spooky House Animation

CSS Halloween Ghost Animation

Pure CSS Halloween Pumpkin/ Jack O Lantern