CSS 로고: Nike 로고

오늘 기사에서는 상징적인 나이키 스우시 로고를 재현해 보겠습니다.

참고로 로고는 이렇게 생겼습니다.

로고 분석

Nike swoosh는 매우 상징적이며 우리가 보는 주요 것은 하나의 큰 줄임표와 겹치는 다른 하나입니다.

이것은 모두 상자에 캡처되어 겹치는 부분이 표시되지 않습니다.
이것을 끌어내려면, 이것이 내가 의미하는 바입니다.



이미지에서 볼 수 있듯이 로고에는 세 가지 항목이 있습니다.

blue box : 여기에 있는 유일한 것인 컨테이너가 표시됩니다

.

red element : 이 줄임표 모양이 실제 로고가 됩니다

.

yellow element : 이것은 swoosh 내부의 초과분을 잘라내는 데 사용할 것입니다.

CSS 나이키 로고

시작하려면 하나의 div만 필요하므로 작업이 더 쉬워집니다.

<div class="nike"></div>

파란색 상자 컨테이너의 뷰포트를 기준으로 이것을 만들고 싶기 때문에 로고의 크기가 조정됩니다.
직사각형 모양을 없애기 위해 사용자 지정 aspect-ratio 을 사용하고 있습니다.

.nike {
  position: absolute;
  overflow: hidden;
  width: 50vmin;
  aspect-ratio: 14/5;
  position: relative;
}

그런 다음 로고가 될 빨간색 요소를 정의할 수 있습니다.

우리는 컨테이너보다 훨씬 더 큰 상자를 만들고 싶습니다.:before 선택기를 사용하여 이 요소를 생성합니다.

.nike {
  &:before {
    content: '';
    position: absolute;
    background: black;
    width: 37%;
    height: 550%;
    bottom: -134%;
    left: 70.5%;
    border-top-left-radius: 48% 17%;
    border-top-right-radius: 120% 40%;
    transform: rotate(-113deg);
    z-index: 1;
  }
}

보시다시피 여기의 주요 마법은 경계 반경에 있습니다. 우리는 double border radius 을 사용하고 있는데 이는 매우 까다롭습니다.
그리고 올바른 모양을 얻기 위해 많은 조정이 필요했습니다.

더 시각적인 테스터를 원한다면 이 환상적인 도구를 찾았습니다.

Fancy border-radius creator

지금까지 다음과 같은 작업이 진행되었습니다.



이것은 이미 멋져 보입니다.
마지막으로 필요한 것은 로고의 안쪽 부분을 잘라내는 것입니다.

이를 위해 :after 의사 선택기를 사용합니다.

.nike {
  &:after {
    content: '';
    position: absolute;
    background: white;
    width: 30%;
    height: 400%;
    bottom: -73%;
    left: 64%;
    border-top-left-radius: 64% 14%;
    border-top-right-radius: 125% 46%;
    transform: rotate(-105deg);
    z-index: 2;
  }
}

이중 경계 반경을 다시 사용하고 요소를 올바른 위치로 오프셋하므로 설정은 매우 유사합니다.

이 CodePen에서 최종 결과를 볼 수 있습니다.

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

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