공개 해결: CSS 아트 크리스마스 트리 만들기

오늘의 퍼즐은 CSS 아트에서 우리 버전의 크리스마스 트리를 양도하라는 요청을 받았기 때문에 이전에 했던 것과는 약간 다릅니다.

You can find the complete puzzle here.

우연의 일치로 저는 작년에 이 접근 방식에 대한 전체 기사를 썼습니다. 이를 달성하는 방법에는 여러 가지가 있기 때문입니다.
그러나 모두 약간의 함정이 있습니다.

Read the article on creating tree Christmas threes in CSS

CSS 크리스마스 트리 만들기

이 퍼즐의 경우 클립 경로 버전을 사용하기로 결정했습니다. 작년 조사에서 이것은 가장 깨끗하고 다재다능한 버전이었습니다.

설정하려면 다음 div가 필요합니다.

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

보시다시피 세 개의 레이어와 두 개의 그림자 레이어가 있습니다.

기본 래퍼의 경우 클립 경로를 다시 계산하지 않고 스케일 변환을 사용하여 조금 더 크게 만들기로 결정했습니다.

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

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

그런 다음 레이어 요소는 실제로 원뿔 모양을 만들기 위해 대부분의 작업을 수행합니다.

.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%);
}

이것은 실제로 정사각형을 만들고 이것이 원으로 변환되고 구를 잘라 내기 때문에 작동합니다.



그림자 레이어는 동일한 패턴을 사용하지만 원추형 구를 약간 오프셋합니다.

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

그러나 이제 모든 레이어가 서로 위에 쌓입니다. 그래서 그들 모두를 조금 상쇄합시다.

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

그리고 위에 있는 체리의 경우 트리에 이모티콘 별을 추가해 보겠습니다.

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

결과는 다음과 같습니다.

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나