CSS 로고: Slack 로고

이 기사에서 나는 slack 로고를 보고 싶었고, 지난 며칠 동안 이 로고를 머리 속에 가지고 있었는데, 이것은 그리드 기반 레이아웃에 잘 작동하는 보기 중 하나이기 때문에 꽤 흥미로운 것입니다.

이것이 내가 말하는 로고입니다.

로고 분석

보시다시피 이 로고는 사각형으로 쉽게 나눌 수 있으며, 여기서 일부 요소는 두 개에 걸쳐 있습니다.

다음은 그리드가 활성화된 완제품의 스크린샷입니다.



그리드를 설정하고 일부 일반 스타일을 사용하여 일부 요소의 레이아웃을 재사용할 수 있습니다.

바로 들어가서 이것이 어떻게 작동하는지 봅시다.

CSS 그리드에서 Slack 로고 만들기

.slack {
  width: 16rem;
  aspect-ratio: 1;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

이렇게 하면 조각으로 채우기 시작할 수 있는 기본 그리드가 생성됩니다.



먼저 왼쪽 상단 파란색 항목 섹션에서 시작하겠습니다.

HTML에서 다음 요소를 추가할 수 있습니다.

<div class="slack">
  <div class="blue small"></div>
  <div class="blue big"></div>
</div>

모든 알약은 기술적으로 반올림되므로 모든 div에 대해 하나의 스타일 요소로 추가할 수 있습니다.

.slack {
  & > div {
    border-radius: 9999px;
  }
}

Note: The above and some code below will be SCSS code

그런 다음 요소를 그리드에 배치할 수 있습니다. 여기에서 가장 간단한 것은 맨 아래에 있는 것입니다. 두 개의 열에 걸쳐 있고 두 번째 행에 있어야 하기 때문입니다.

.blue {
  background: #36c5f0;
  &.big {
    grid-row: 2;
    grid-column: span 2;
  }
}

보시다시피 이 요소를 행 2에 놓고 두 열에 걸쳐 있도록 설정했습니다.

우리는 작은 것에 대해 비슷한 것을 할 수 있지만 오른쪽 하단 모서리를 둥글게 할 수는 없습니다.

.blue {
  &.small {
    grid-column-start: 2;
    border-bottom-right-radius: 0px;
  }
}

지금까지는 다음과 같은 모습이어야 합니다.



그러나 너무 뭉쳐진 것을 금방 알 수 있으므로 그리드에 간격을 추가해 보겠습니다.

.slack {
  gap: 0.5rem;
}

이제 다른 세 면을 추가하고 적절하게 배치할 수 있습니다. 변경되는 주요 사항은 열/행 시작 및 끝과 끄는 테두리입니다.

<div class="slack">
  <div class="blue small"></div>
  <div class="blue big"></div>
  <div class="green small"></div>
  <div class="green big"></div>
  <div class="red small"></div>
  <div class="red big"></div>
  <div class="yellow small"></div>
  <div class="yellow big"></div>
</div>

그리고 CSS 덤프의 경우 이 CodePen을 확인하여 무슨 일이 일어나고 있는지 확인하십시오.

열/행 시작 및 끝을 결정하는 올바른 방법이 여러 가지 있음에 유의하십시오.

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

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