Categories
CSS Web development

CSS Scarecrow

Autumn harvest is coming, and with it Scarecrows πŸ™‚
Let’s create one with CSS!

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

CSS code opened in the Safari browser:

CSS Scarecrow
*to see the live output of the CSS code click here.

To create the Scarecrow above you need to add the first an HTML, and then style the HTML with CSS.

Step1.

Add HTML

<div id="circle">
<div class="content">
  <div class="clouds">
  <div class="cloud"></div>
  <div class="cloud1"></div>
  <div class="cloud2"></div>
  <div class="cloud3"></div>
  </div>
  <div class="grass"></div>
  <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;
}
#circle {
  positon: relative;
  overflow: hidden;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #db995a;
  box-shadow: 10px 5px 1px rgba(0,0,0,0.07);
}

Add clouds to the background:

.content {
  position: relative;
}

.clouds {
  position: absolute;
  top:-10px;
}

.cloud {
  position: absolute; 
  background-color: #f4ae4a;
  width: 120px;
  height: 30px;
  border-radius: 100px;
  left: 270px;
  top: 80px;
}
.cloud:before {
  content:"";
  position: absolute;
  width: 100px;
  height: 30px;
  border-radius: 100px;
  top:30px;
  background-color: #f4ae4a;
  left: 40px; 
}

.cloud:after {
  content:"";
  background-color: #db995a;
  position:absolute;
  border-radius:100px;
  width:50px;
  height:30px;
  top:30px;
  left:20px;
}

.cloud1 {
  position: absolute;
  height:30px;
  width:160px;
  background-color: #f4ae4a;
  top:140px;
  left:250px;
  border-radius:100px;
}

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

.cloud1:before {
  content:"";
  position: absolute;
  background-color: #f4ae4a;
  width: 80px;
  height: 30px;
  border-radius:100px;
  top:30px;
  left:50px;
}

.cloud2 {
  position: absolute;
  background-color: #db995a;
  width: 50px;
  height:30px;
  border-radius:100px;
  top:170px;
  left:350px;
  
}

.cloud2:after {
  position: absolute;
  content:"";
  height:30px;
  width:90px;
  background-color: #f4ae4a;
  top:30px;
  border-radius:100px;
  left:-60px;
  
}

.cloud2:before {
  background-color: #f4ae4a;
  position: absolute;
  content:"";
  width:90px;
  height:30px;
  left:-360px;
  border-radius:100px;
  top:60px;
}

.cloud3 {
  position: absolute; 
  background-color: #f4ae4a;
  width: 60px;
  height: 30px;
  left:-10px;
  top:200px;
  border-radius:100px;
}

.cloud3:after {
  position: absolute;
  content:"";
  background-color: #db995a;
  height: 30px;
  width:50px;
  border-radius:100px;
  left:30px;
  
}

.cloud3:before {
  content:"";
  position:absolute;
  height:30px;
  width:120px;
  background-color: #f4ae4a;
  top:-30px;
  border-radius:100px;
  
}

And the grass:

.grass {
  background-color: #2a3c24;
  width: 400px;
  height:200px;
  border-radius:50%;
  top:250px;
  position:absolute;
  left:0;
}
CSS Autumn
*the output should look like that so far

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

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

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *