Pure CSS Christmas Tree

Creating Christmas Tree With Pure Css

Creating a Christmas Tree with pure CSS

In this post we will learn about How To Create  Christmas Tree With Pure Css Without Single line of javascript code so, We only use HTML and CSS For Create Christmas tree. This Christmas Tree conatins some lights and small bumb, But We will not use any javascript here.

Christmas Animation Effects Using Html And CSS

15+ CSS Background Patterns

Pure CSS Buttons

 

Christmas tree With Purre Css

 

Live Preview

we are going to emebed a frame which display the Live preview of full running project which is created in this post

 

HTML Code

We first need to write our HTML. First, we’ll have a H1 , which we’ll give heading of Marry Christmas This will add a good style in  our tree. Then We have a div with fir classname which conatins all the Tree parts and body. So lets See The HTML code Written Below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Christmas tree With Pure CSS</title>
</head>
<body>
    <h1 class="headline">Merry Christmas!</h1> 
    <div class="fir"> 
        <div class="fir__item"></div>
         <div class="fir__item"></div>
          <div class="fir__item"></div>
           <div class="fir__log"></div> <div class="orbs orbs-1"></div>
            <div class="orbs orbs-2"></div> <div class="orbs orbs-3">

            </div> <div class="orbs orbs-4"></div> </div>
</body>
</html>

 

Inside of main fir class we have three div with classname ‘Fir__item’ which is three trinagular shape on top of each other with proper green background which create  looks like Christmas tree body. After that we have a another div indide the main div with classname “fir__logs” which add a leg part or root part of Christmas tree. The above code will fixed if you make any type of changes in thier codes probably you have to face some error or something like error. After the leg we ahve to setup many small bubls so we are using <div class="orbs orbs-1"></div> for each small bulbs , You can change the color and light according to your choice

 CSS Code

We are going to use mainly four colors in this Pure css Christmas tree. The colors is defind following
$red: #ed0000;
$red-light: #f77373;
$yellow: #e7c400;
$yellow-light: #fbeea3;
n the styling we are only aligning all element which give a Christmas tree look, like we useed green color for tree leaf structure and lightyellow color for tree body andbrown color for legs of tree and added somme box shadow for making glowing small bulbs, Css Code For Styling is written below

@import url(https://fonts.googleapis.com/css?family=Berkshire+Swash);

/* Vars */

$red: #ed0000;
$red-light: #f77373;
$yellow: #e7c400;
$yellow-light: #fbeea3;


/* Animations */

@keyframes hover {
  0% {
    transform: translate3d(0, 0, 0);
    color: #b81313;
  }
  50% {
    transform: translate3d(0, -.2em, 0);
    color: #db3e3e;
  }
  100% {
    transform: translate3d(0, 0, 0);
    color: #b81313;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0px 0px .3em rgba(255,255,255,.8);
  }
  50% {
    box-shadow: 0px 0px .3em rgba(255,255,255,.4);
  }
  100% {
    box-shadow: 0px 0px .3em rgba(255,255,255,.8);
  }
}


/* Styles */

* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 200%; // This is how you control the size
  padding: 2em;
  background: linear-gradient(#c9e1e0, #fff) no-repeat;
}

.headline {
  margin-bottom: .5em;
  color: #b81313;
  font-family: 'Berkshire Swash', cursive;
  font-weight: normal;
  text-align: center;
  text-shadow: 0 .05em .1em #fff;
  animation-name: hover;
  animation-iteration-count: infinite;
  animation-duration: 3.5s;
}

.fir {
  position: relative;
  margin: 0 auto;
  width: 8em;
}

.fir__item {
  margin: 0 auto;
  width: 0;
  height: 0;
  border-left: 2.3em solid transparent;
  border-right: 2.3em solid transparent;
  border-bottom: 3em solid #16850c;
  
  &:nth-child(2) {
    margin-top: -1.3em;
    border-left-width: 3em;
    border-right-width: 3em;
    border-bottom-width: 4em;
  }
  
  &:nth-child(3) {
    margin-top: -1.7em;
    border-left-width: 4em;
    border-right-width: 4em;
    border-bottom-width: 5em;
  }
}

.fir__log {
  margin: 0 auto;
  width: 1.3em;
  height: 1.3em;
  background: #8c370f;
  background: linear-gradient(#8c370f, #5c240a);
}

.orbs {
  position: absolute;
  width: .6em;
  height: .6em;
  border-radius: 50%;
  box-shadow: 0px 0px .3em rgba(255,255,255,.8);
  animation-name: pulse;
  animation-iteration-count: infinite;
  animation-duration: 2.5s;

  &:before,
  &:after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 50%;
    box-shadow: 0px 0px .3em rgba(255,255,255,.8);
    animation-name: pulse;
    animation-iteration-count: infinite;
    animation-duration: 2.5s;
  }
}

.orbs-1 {
  top: 1.2em;
  left: 3.2em;
  background: $red;
  background: radial-gradient(circle, $red-light, $red);
  
  &:before {
    top: 2.4em;
    left: 1.5em;
    width: .6em;
    height: .6em;
    background: $red;
    background: radial-gradient(circle, $red-light, $red);
  }
  
  &:after {
    top: .7em;
    left: 1em;
    width: .8em;
    height: .8em;
    background: $yellow;
    background: radial-gradient(circle, $yellow-light, $yellow);
  }
}

.orbs-2 {
  top: 3.4em;
  left: 2.9em;
  background: $yellow;
  background: radial-gradient(circle, $yellow-light, $yellow);
  
  &:before {
    top: 2.4em;
    left: 1.5em;
    width: .6em;
    height: .6em;
    background: $yellow;
    background: radial-gradient(circle, $yellow-light, $yellow);
  }
  
  &:after {
    top: 1.2em;
    left: .5em;
    width: .8em;
    height: .8em;
    background: $red;
    background: radial-gradient(circle, $red-light, $red);
  }
}

.orbs-3 {
  top: 6.4em;
  left: 2.2em;
  background: $yellow;
  background: radial-gradient(circle, $yellow-light, $yellow);
  
  &:before {
    top: 1.4em;
    left: 3.5em;
    width: .6em;
    height: .6em;
    background: $yellow;
    background: radial-gradient(circle, $yellow-light, $yellow);
  }
  
  &:after {
    top: .9em;
    left: 1.4em;
    width: .8em;
    height: .8em;
    background: $red;
    background: radial-gradient(circle, $red-light, $red);
  }
}

.orbs-4 {
  top: 7.9em;
  left: 1.7em;
  background: $red;
  background: radial-gradient(circle, $red-light, $red);
}

Conclusion

I hope making the Christmas tree was fun for you! I tried to keep the project simple so that you could understand the basic coding and animation stuff better. I also hope that the way I explained things made sense to you.

By doing this, my goal was to help you learn not just how to make a cool Christmas tree but also to get the hang of the basic ideas behind coding and using technology. I hope it felt like a good starting point and that you can use what you learned here in other things you might want to create.

 

Is This Project Creted With Only CSS ?

i think yes, becasuse i used only html and css only form make this project

Can i customize This Christmas Tree ?

yes, You can customize christmas even all animation or anything beacuse i used simple and understandable syntax in it

Is This Project contain Javascript code ?

No, i did’nt used any javascript code for make this beautifull christmas tree with css



Leave a Reply