CSS 로고: Figma 로고

CSS Slack logo을 만드는 동안 기본 설정의 Figma 로고와 매우 흡사하다고 생각하지 않을 수 없었습니다.

CSS에서 Figma 로고를 만드는 방법을 살펴보십시오.

로고는 다음과 같습니다.

로고 분석

슬랙 로고용 그리드 솔루션에서 본 것과 마찬가지로 그리드로 만들 수도 있습니다.

또는 이를 위해 flexbox를 사용할 수 있습니다.

고를 수 없으니 둘 다 해보고 어느 쪽이 더 깔끔해 보이는지 결정하시면 됩니다.

2x3 그리드에 자동으로 배치되는 그리드에 대해 단일 그리드 요소 옵션을 사용할 수 있습니다.

flex에 대해 행당 두 개의 요소를 강제하고 래핑합니다. 이렇게 하면 동일한 결과를 얻을 수 있습니다.

모서리는 Slack 로고에서 본 것과 동일하지만 알 수 있듯이 모두 모양이 다르므로 각 요소에 대해 명시하는 것이 가장 좋습니다.

CSS에서 Figma 로고 만들기

이 프로젝트의 HTML은 두 번 동일하지만 기본 래핑 클래스를 변경합니다.

<div class="figma-flex figma-grid">
  <div class="block red"></div>
  <div class="block orange"></div>
  <div class="block purple"></div>
  <div class="block blue"></div>
  <div class="block green"></div>
</div>

위의 HTML에서 figma-flex 또는 figma-grid를 선택할 수 있습니다.

그런 다음 각 블록에 필요한 스타일을 추가하여 특정 크기로 만들 수 있습니다.

.block {
  width: 5rem;
  aspect-ratio: 1;
}

이제 각 블록에 색상을 추가하고 필요한 테두리 반경을 지정할 수 있습니다.
색상마다 테두리 반경이 다르기 때문에 이것이 가장 쉬운 방법입니다.

.red {
  background: #f24e1e;
  border-radius: 50% 0 0 50%;
}
.orange {
  background: #ff7262;
  border-radius: 0 50% 50% 0;
}
.purple {
  background: #a259ff;
  border-radius: 50% 0 0 50%;
}
.blue {
  background: #1abcfe;
  border-radius: 50%;
}
.green {
  background: #0acf83;
  border-radius: 50% 0 50% 50%;
}

이것은 이제 모든 블록 스타일을 처리해야 하며, 이 시점에서 모든 블록을 사용할 수 있지만 올바르게 정렬되지는 않았습니다.



다음 클래스를 추가하는 것처럼 간단하게 flexbox에서 순서를 지정하는 것으로 시작하겠습니다.

.figma-flex {
  max-width: 10rem;
  display: flex;
  flex-wrap: wrap;
}

Note: The max-width is twice the size of one block!

그리고 이것은 이미 플렉스 솔루션에 대한 모든 것을 처리합니다.
그리드의 경우 다음 코드를 사용할 수 있습니다.

.figma-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 10rem;
}

보시다시피 Flex 솔루션과 매우 유사합니다. 행이 자동으로 흐르도록 두 개의 열을 표시하도록 선택합니다. 그런 다음 최대 너비가 초과하지 않는지 확인합니다.

이 CodePen에서 전체 결과를 찾을 수 있습니다.

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

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