CSS 로고: Spotify 로고

이 기사에서는 Spotify 로고를 다시 만들 것입니다. 이 오래된 앱 아이콘이 마음에 들기 때문에 픽셀 단위까지 완벽하게 표현하지는 않겠습니다. (조금 더 둥근 버전)

Note: The above image is the current logo

로고 분석

먼저 로고의 배경에 큰 둥근 버튼과 세 개의 둥근 선이 있는 것을 볼 수 있습니다.

이 둥근 선은 처음에는 단순해 보이지만 CSS에는 "선"이 없으며 이러한 종류의 구부러진 선에 둥근 모서리를 적용할 수도 없습니다.

우리가 얻을 수 있는 가장 가까운 방법은 사각형을 만들고 테두리 반경을 추가하는 것이지만, 이 경우 커브를 만들 수 없습니다.

따라서 내 접근 방식은 둥근 타원을 사용하고 상단 테두리에만 색상을 지정한 다음 pseudo-elements을 사용하여 둥근 끝을 추가할 수 있습니다.

좋아, 이걸 하자.

CSS에서 Spotify 로고 만들기

먼저 필요한 HTML부터 시작하겠습니다.
둥근 버튼을 담을 하나의 컨테이너 div를 사용한 다음 각 라인에 대해 내부에 3개의 div를 사용할 것입니다.

<div class="spotify">
  <div class="line top"></div>
  <div class="line middle"></div>
  <div class="line bottom"></div>
</div>

aspect-ratio과 50%의 테두리 반경을 활용하여 완전히 둥글게 만들 수 있습니다.

.spotify {
  position: relative;
  width: 8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #00db4d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
  transform: rotate(9deg);
}

나는 또한 더 깊은 표정을 주기 위해 작은 상자 그림자를 추가했습니다.
그런 다음 전체 div를 약간 회전하도록 변환합니다. 이것은 로고에 필요한 기울이기 효과를 제공합니다.
마지막으로 그리드를 사용하여 라인 요소를 시작점으로 중앙에 배치합니다.

각각 고유한 속성 집합이 있지만 줄에 대한 코드에서 재사용할 수 있는지 확인하고 싶었습니다.
이를 위해 CSS vars을 사용하겠습니다.

일반적인 아이디어부터 시작하겠습니다.
우리는 꽤 큰 상자를 만들고 위쪽 테두리에만 색을 칠할 것입니다.

.line {
  border: var(--line) solid transparent;
  border-top: var(--line) solid #fff;
  border-radius: 50%;
  height: 2rem;
  width: var(--width);
  position: absolute;
  margin-top: var(--margin-top);
}

여기에서 변수를 이미 발견했을 수 있습니다. 각 줄에 대해 변경할 수 있는 몇 가지 사항이 있습니다.

테두리: 기본적으로 각 라인의 크기

너비: 선이 늘어나야 하는 너비

마진 상단: 상단에서 오프셋해야 하는 정도

그러나 맨 윗줄에만 색상을 추가하여 의미하는 바를 빠르게 보여 드리겠습니다.
다른 모든 테두리를 파란색으로 만들어 무슨 일이 일어나는지 봅시다.

.line {
  border: var(--line) solid blue;
  border-top: var(--line) solid #fff;
}

보시다시피 선은 흰색 부분에 완벽하게 표시되며 파란색 부분을 투명하게 설정했기 때문에 아무도 그것을 볼 수 없습니다.

하지만 위 이미지에서 볼 수 있듯이 모서리를 둥글게 만들고 싶습니다.

각 줄에 필요한 변수를 설정합니다. 다음 코드를 사용할 수 있습니다.

.top {
  --width: 5rem;
  --line: 1rem;
}
.middle {
  --width: 4rem;
  --line: 0.75rem;
  --margin-top: 2.5rem;
}
.bottom {
  --width: 3rem;
  --line: 0.5rem;
  --margin-top: 4.5rem;
}

이미 꽤 좋아 보이는 아래 이미지와 비슷한 것이 있어야 합니다.



그러나 여전히 둥근 모서리가 없습니다.
이를 위해 사전 및 사후 의사 요소를 활용할 수 있습니다.

.line {
  &:before,
  &:after {
    content: '';
    width: calc(var(--line) - 1px);
    height: calc(var(--line) - 2px);
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
  }
}

Note: The above code is SCSS. You can also recreate this in plain CSS.

위의 코드는 줄의 크기에 따라 줄임표를 출력하여 완전히 반올림합니다.
우리가 해야 할 일은 왼쪽과 오른쪽 위치에서 오프셋하는 것입니다.

이는 라인마다 다르기 때문에 이에 대한 새 변수를 추가하겠습니다.

top : 이 둥근 모서리의 상단 오프셋

horizontal : 왼쪽 또는 오른쪽 오프셋, 이전은 왼쪽에서, 이후는 오른쪽에서 오프셋됩니다.

.line {
  &:before {
    top: var(--top);
    left: var(--horizontal);
  }
  &:after {
    top: var(--top);
    right: var(--horizontal);
  }
}

이제 이러한 변수를 각 줄에 간단히 추가할 수 있습니다.

.top {
  // Other vars
  --top: -5px;
  --horizontal: -6px;
}
.middle {
  // Other vars
  --top: -2px;
  --horizontal: -4px;
}
.bottom {
  // Other vars
  --top: 0px;
  --horizontal: 0px;
}

그리고 그게 다야. CSS로 만든 약간 대안적이지만 흥미로운 Spotify 로고.

이 CodePen에서 결과를 확인할 수 있습니다.

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

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