CSS Christmas Tree with Gift Box

CSS Christmas Tree

By using the power of CSS3, we are going to draw a complex shape. We will create CSS Christmas tree for an upcoming event. We will draw a tree with different color combination. We also add few elements like star and lights on the tree and when user hover, it will bright.

Not only this, We also create a small gift box which will be placed near to tree. All this will be done with CSS3 and bit of javascript.

To replace the images with CSS is pretty much awesome stuff because you are reducing the load time of your website. It’s the best way for a front-end developer to go with CSS, especially CSS3. The CSS3 not only help to create complex shapes but also allow to add animation on different elements.

Today you will see one another example of the power of CSS3. Let’s get started with HTML and have a look how to make Christmas Tree.

HTML Markup

You notice that we have simply defined the container which will hold all the elements. These elements will be star, pressie, ribbon and different layers.

One big star will be placed at the top of the tree and the second one is a small star which will place on the tree.

<div class="container">
    <div class="star"></div>
</div>

Next, We are going to make a gift box and we will define it’s HTML just right below the big star. By using of CSS, we will move it at bottom of tree.

<div class="pressie">
    <div class="cover"></div>
    <div class="wrap"> </div>
    <div class="ribbon"></div>
</div>

After this, we need to define the HTML for our tree and we have defined a div class name tree which hold the other elements including layer, line, and bauble etc.

<div class="tree">
    <div class="base"></div>
    
    <div class="layer">
      <div class="line"></div>
      <div class="bauble one"></div>
    </div>
    
    <div class="layer two">
      <div class="line two"> </div>
      <div class="bauble two"></div>
      <div class="socks">
        <div class="top"> </div>
        <div class="foot"></div>
      </div>
    </div>
    
    <div class="layer three">
      <div class="line three"> </div>
      <div class="bauble three"></div>
      <div class="socks two">
        <div class="top"> </div>
        <div class="foot two"></div>
      </div>
    </div>
</div>

The tree is made by defining the different layers. We have total four layers, each gives a shape of a tree.

<div class="layer four">
    <div class="bauble four"></div>
    <div class="star two"></div>
    <div class="line four"> </div>
</div>

The CSS

We will use the position absolute to handle the different elements on the tree. For example, let’s have a look the socks which use the position absolute then top and left values to align them properly. The CSS transform property allows us to rotate them.

.socks {
  position: absolute;
  top: 80px; left: 10px;
  z-index: 1;
  transform: rotate(10deg);
}

Similar, the seocnd socks have different positioning value to place it into different area of tree. Also you notice the transform rotate is -10deg.

.socks.two {
  position: absolute;
  top: 143px; left: -40px;
  z-index: 1;
  transform: rotate(-10deg);
}

In above HTML section, I have explain you about different layer sections and here we do style them by using of border proeprty.

Each of layer will have a different position and we handle this by using a positoining element.

.layer {
  position: absolute;
  width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #499F68;
}
.layer.two{
  position: absolute;
  top: 30px; left: -10px;
  border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 120px solid #499F68;
}

To make visiable bauble on the tree, we have z-index property and to define the size, we simply use widht and height.

.bauble {
  z-index: 1;
  position: absolute;
  border-radius: 100%;
}
.bauble.one { 
  top: 65px;
  width: 13px;
  height: 13px;
  background: #FFE066;
} 

Similar, you see the lines on tree and we make them by using of background and border element.

.line {
  z-index: 1;
  position: absolute;
  top: 70px; left: -43px;
  width: 70px;
  height: 0;
  background: #FFE066;
  border: 1px dashed #FFF;
  transform: rotate(-30deg);
}

The pressie which is a gift box is also make by using the same techique. The only difference is the value of elements.

.pressie {
  z-index: 1;
  position: absolute;
  top: 250px;  left: 120px;
  width: 60px;
  height: 60px;
  background: #F45B69;
}

CSS Christmas Tree Demo

I didn’t explain you all CSS here because it’s very long that’s why we have the demo for you to see. Let’s have a look the codepen code here.

See the Pen #codevember -28 Christmas Tree by Sasha (@sashatran) on CodePen.

You May Also Like

Leave a Reply

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