4

Public Solving: Making a CSS art Christmas tree

 2 years ago
source link: https://dev.to/dailydevtips1/public-solving-making-a-css-art-christmas-tree-5hmm
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Today's puzzle is a bit different than anything we did before, as we are asked to hand over our version of a Christmas tree in CSS art.

You can find the complete puzzle here.

Coincidental I wrote a whole article on this approach last year, as there are many ways to achieve this.
But all come with some pitfalls.

Read the article on creating tree Christmas threes in CSS

Creating a CSS Christmas Tree

For this puzzle, I've decided to use the clip-path version. During my research last year, this was the cleanest and most versatile version.

To set it up we need the following divs:

<div class="xmas-tree">
  <div class="shadow"></div>
  <div class="layer"></div>
  <div class="shadow"></div>
  <div class="layer"></div>
  <div class="layer"></div>
</div>

Enter fullscreen mode

Exit fullscreen mode

As you can see, there are three layers and two shadow layers.

As for the main wrapper I've decided to not recalculate the clip-paths but rather use a scale transform to make it a bit bigger:

.xmas-tree {
  position: relative;
  margin-top: 20px;
  transform: scale(3, 3);
  top: -250px;
  left: -150px;
}

Enter fullscreen mode

Exit fullscreen mode

Note: this is the cheap way of doing it 😅 *(We should have opted to change the clip-paths)

Then the layer element will actually do most of the work to make a conic shape.

.xmas-tree .layer {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: green;
  clip-path: polygon(50% 5%, 100% 85%, 100% 100%, 0 100%, 0 85%);
}

Enter fullscreen mode

Exit fullscreen mode

This works because it actually creates a square, this gets converted to a circle, and we cut a sphere out.

The shadow layer uses the same pattern, but we slightly offset the conic sphere.

.xmas-tree .shadow {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: black;
  clip-path: polygon(50% 0%, 0% 110%, 95% 100%);
  margin-top: 20px;
  margin-left: 10px;
}

Enter fullscreen mode

Exit fullscreen mode

However, now all the layers are stacked on top of each other. So let's offset them all a bit.

.xmas-tree div:nth-child(1) {
  transform: translateY(5px);
  z-index: 3;
}
.xmas-tree div:nth-child(2) {
  transform: translateY(0);
  z-index: 3;
}
.xmas-tree div:nth-child(3) {
  transform: translateY(40px);
  z-index: 2;
}
.xmas-tree div:nth-child(4) {
  transform: translateY(35px);
  z-index: 2;
}
div:nth-child(5) {
  transform: translateY(70px);
  z-index: 1;
}

Enter fullscreen mode

Exit fullscreen mode

And for the cherry on top, let's add an emoji star to our tree.

.xmas-tree:before {
  content: '⭐️';
  position: absolute;
  left: 42px;
  z-index: 10;
  top: -9px;
}

Enter fullscreen mode

Exit fullscreen mode

Resulting in the following:

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK