CSS 로고: Hashnode 로고

저는 얼마 전에 CSS에서만 환상적인 로고를 재현하여 이 CSS 챌린지를 시작하고 싶었습니다.

최근에 CSS Hashnode 챌린지를 위해 이것을 다시 만들었기 때문에 Hashnode부터 시작하겠습니다.

See my result of the challenge here

로고 분석

로고를 보는 동안 구멍이 있는 둥근 사각형을 빠르게 볼 수 있습니다.



이것은 충분히 쉽게 들립니다.
그러나 한 가지 문제가 조금 더 복잡해집니다.

이것은 전체 시스루를 만드는 것이 꽤 까다로울 수 있다는 사실입니다.

이제 이것을 두 부분으로 나누겠습니다. 하나는 단색으로 만들고 다른 하나는 투명하게 만듭니다.

CSS 해시노드 로고

먼저 약간 회전된 둥근 사각형을 만드는 것으로 시작해야 합니다.

HTML의 경우 hashnode 클래스와 함께 하나의 div를 사용합니다.

.hashnode {
  width: 5em;
  aspect-ratio: 1;
  border-radius: 1.25em;
  background: #2962ff;
  transform: rotate(45deg);
}

종횡비를 사용하여 로고가 정사각형인지 확인합니다. 또한 45도 회전하므로 동일한 위치에 있습니다.
이 시점에서 다음과 같은 블록이 있어야 합니다.



이제 before 요소를 활용하여 이 위에 흰색 점을 추가할 수 있습니다.

&:before {
  content: '';
  border-radius: 50%;
  background: white;
  height: 2em;
  aspect-ratio: 1;
}

그리고 이것으로 우리는 단순한 둥근 모양을 얻습니다. 둥근 요소를 중앙에 배치하기 위해 기본 래퍼 div에 다음 두 요소를 추가할 수 있습니다.

.hashnode {
  display: grid;
  place-items: center;
}

이제 다음과 같은 결과가 나타납니다.

CSS 시스루 Hashnode 로고

위 솔루션의 주요 문제는 표시되지 않기 때문에 배경에 아무 것도 가질 수 없다는 것입니다.

그래서 그것을 시도하고 바꾸자.

기본 설정은 위의 솔루션과 정확히 동일합니다.

.hashnode {
  width: 5em;
  aspect-ratio: 1;
  border-radius: 1.25em;
  background: #2962ff;
  transform: rotate(45deg);
}

그런 다음 마스크를 활용하여 중간 부분을 마스킹할 수 있습니다.

-webkit-mask: radial-gradient(#0000 28%, #000 28%);
mask: radial-gradient(#0000 28%, #000 28%);

이렇게 하면 중앙 요소가 가려지므로 배경을 추가하고 무슨 일이 일어나는지 볼 수 있습니다.



위의 CodePen에서 볼 수 있듯이 로고를 통해 배경이 표시됩니다. 훌륭합니다!
마스크 옵션은 요소의 일부를 가리는 강력한 도구입니다.

읽어주셔서 감사합니다. 연결해 봅시다!

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