CSS 로고: GitHub 로고

21130 단어 beginners css webdev

이것은 이전 시리즈에서 요청한 것입니다. 그리고 나는 그것을 내 목록에 넣었지만 그것을 만드는 것을 두려워했습니다.

GitHub 로고에는 마스코트인 Octocat이 포함되어 있으며, 다시 만들기 쉬운 모양이 아닙니다 🤯.

로고 분석

로고는 Octocat 컷아웃이 포함된 둥근 모양으로 구성되어 있습니다.

Octocat 자체는 까다로운 부분입니다. 조금 더 나누기 위해 섹션별로 살펴보겠습니다.

머리: 머리는 둥근 직사각형이라 더 직선적인 모양이고 귀는 꽤 까다롭지만 그에 대한 트릭을 보여드리겠습니다 :)

본체: 본체는 다시 원통 모양이지만 생성하기 매우 어려운 이상한 둥근 모서리가 있습니다

꼬리: 뱀과 같은 흐름이기 때문에 지금까지 가장 어려운 부분입니다. 나는 이것을 완벽하게 이해하지 못했습니다.

자, 이 환상적이지만 도전적인 로고를 다시 만들어 보겠습니다.

CSS GitHub 로고

Note: I'll be using SCSS throughout this article

먼저 HTML 구조부터 시작하겠습니다. 이것은 상당히 복잡한 모양이므로 도움이 되는 몇 가지 추가 요소가 필요합니다.

<div class="github">
  <div class="tail">
    <div class="tip"></div>
  </div>
  <div class="head">
    <div class="ear ear-left"></div>
    <div class="ear ear-right"></div>
  </div>
  <div class="body">
    <div class="bottom"></div>
  </div>
</div>

나는 나 자신에게 도전하기 위해 가능한 한 적은 요소를 사용하려고 노력했습니다.

그런 다음 root variables을 정의하고 크기와 두 가지 색상을 결정했습니다.

:root {
  --size: 50vmin;
  --bg: black;
  --logo: white;
}

그런 다음 기본 래퍼인 둥근 공을 만들어 봅시다.

.github {
  width: var(--size);
  aspect-ratio: 1;
  background: var(--bg);
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
}

그런 다음 모든 것을 기반으로 하는 훌륭한 모양인 머리를 만들어 봅시다.

.head {
  width: 64%;
  height: 48%;
  background: var(--logo);
  position: absolute;
  top: 24%;
  border-radius: 50% 49% 40% 40% / 45% 45% 45% 45%;
}

나는 double border-radius solution을 사용합니다. 이것은 이 이상한 모양에 대한 완벽한 사용 사례를 만듭니다.

지금까지 우리는 다음과 같은 모양을 가져야 합니다.

귀로 넘어 갑시다. 언급했듯이 이들은 상당히 이상한 모양입니다. 둥근 삼각형이지만 끝이 뾰족합니다.
그것은 일반적으로 CSS에서 만드는 것이 불가능합니다.

그러나 둥근 사각형을 회전하면 한쪽 귀의 왼쪽을 얻을 수 있습니다. 그런 다음 추가적인 사전 요소를 사용하여 오른쪽을 둥글게 만들 수 있습니다.

다른 쪽 귀에도 동일한 코드를 사용하지만 회전하려면 scaleX(-1)를 사용합니다.

.ear {
  position: absolute;
  background: var(--logo);
  border-radius: 0% 56% 20% 80%;
  top: -2%;
  width: 32%;
  height: 40%;
  &-left:before,
  &-right:before {
    content: '';
    position: absolute;
    background: var(--logo);
    border-radius: 50%;
    width: 62%;
    height: 15%;
    transform: rotate(4deg);
    top: -4%;
  }
  &-left {
    left: 4%;
    transform: rotate(16deg);
  }
  &-right {
    right: 4%;
    transform: rotate(345deg) scaleX(-1);
  }
}

다음 이미지에서 한쪽 귀의 이상한 크기를 빨간색으로 표시하고 다시 둥글게 만드는 흰색 오버레이를 볼 수 있습니다.

그러면 몸이 일어납니다. 둥근 사각형을 사용할 수 있으므로 기본 모양은 비교적 쉽습니다.

.body {
  background: var(--logo);
  width: 25%;
  height: 35%;
  bottom: -4%;
  position: absolute;
  border-radius: 34%;
}

그러나 이제 하단의 둥근 모서리가 누락되었습니다.
이를 달성하기 위해 아래쪽 div를 사용하여 직사각형 모양인 더 넓은 섹션을 추가합니다.

.bottom {
  position: absolute;
  background: var(--logo);
  width: 130%;
  height: 20%;
  bottom: 10%;
  left: -15%;
}

그런 다음 본체:before 및 :after를 사용하여 줄임표 모양을 추가하여 반올림을 잘라냅니다.

.body {
  &:before,
  &:after {
    content: '';
    position: absolute;
    width: 30%;
    height: 30%;
    background: var(--bg);
    bottom: 18%;
    border-radius: 50%;
  }
  &:before {
    left: -32%;
    transform: rotate(327deg);
    z-index: 1;
  }
  &:after {
    border-radius: 50%;
    right: -32%;
    transform: rotate(33deg);
  }
}

다음 이미지에서 해당 도형을 빨간색으로 표시하여 작동 방식을 확인했습니다.

그리고 가장 까다로운 부분인 꼬리!
이것은 만들기에 가장 어려운 부분이며 세 부분으로 나누기로 결정했습니다.

본체에 부착되는 중앙부

다른

비뚤어진 모퉁이 부분

그리고 끝에 있는 팁

나는 모든 것을 둥글게 만들기 위해 타원 모양을 기반으로 했습니다.
그런 다음 배경색을 지정하여 특정 부분을 "제거"하는 의사 요소를 추가했습니다.

.tail {
  border-radius: 50%;
  position: absolute;
  width: 22%;
  height: 13%;
  background: var(--logo);
  bottom: 14%;
  left: 21%;
  &:before,
  &:after {
    content: '';
    position: absolute;
    border-radius: 50%;
  }
  &:before {
    width: 100%;
    height: 100%;
    bottom: 64%;
    left: 10%;
    background: var(--bg);
    transform: rotate(337deg);
  }
  &:after {
    width: 19%;
    height: 52%;
    transform: rotate(327deg);
    bottom: 13%;
    left: 2%;
    background: var(--logo);
  }
  .tip {
    width: 36%;
    height: 110%;
    position: absolute;
    background: var(--logo);
    border-radius: 50%;
    left: -25%;
    top: -35%;
    transform: rotate(322deg);
    &:before,
    &:after {
      content: '';
      position: absolute;
      border-radius: 50%;
    }
    &:before {
      width: 43%;
      height: 41%;
      background: var(--logo);
      transform: rotate(325deg);
      top: -9%;
      left: 35%;
    }
    &:after {
      width: 45%;
      height: 103%;
      background: var(--bg);
      top: -6%;
      left: -6%;
    }
  }
}