CSS 로고: Netflix 로고

오늘 기사에서는 상징적인 Netflix 로고를 다시 만들어 보겠습니다. 이 로고를 작업하면서 꽤 쉬운 로고라는 것을 알았습니다.

직접 해보는 재미 💖

로고를 살펴보겠습니다.

로고 분석

로고는 같은 크기의 막대기 세 개로 구성됩니다. 그러나 가운데 것은 그림자를 드리우고 왜곡됩니다.

그런 다음 하단에서 로고가 약간 둥글다는 점에 유의하는 것이 좋습니다.

내 생각은 비스듬한 스틱 + 둥근 바닥 섹션을 만들기 위해 두 개의 측면 기둥과 의사 요소에 대한 테두리를 활용하는 것입니다.

CSS에서 Netflix 로고 다시 만들기

간단한 상자를 만들고 테두리를 왼쪽과 오른쪽으로 설정하여 시작하겠습니다.

.netflix {
  height: 15rem;
  width: 3rem;
  border-left: 3rem solid #e50914;
  border-right: 3rem solid #e50914;
  position: relative;
}

3rem가 각 막대기의 크기라는 점에 유의하는 것이 중요합니다.

지금까지 다음 스타일 요소를 얻었습니다.



이전 요소를 추가하여 세 번째 기울기 선을 추가해 보겠습니다.
주요 아이디어는 이것이 단순히 상자의 너비와 높이가 될 수 있다는 것입니다.

&:before {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background: #e50914;
  transform: skewX(21.5deg);
  box-shadow: 0 0 30px black;
}

가장자리에 맞게 요소를 기울이고 약간의 상자 그림자를 추가하여 아래 막대기에 그림자를 드리우는 것을 볼 수 있습니다.

마지막으로 필요한 것은 아래쪽 둥근 효과입니다.
바닥에서 상쇄되는 둥근 상자를 활용할 것입니다.

&:after {
  content: '';
  width: 15rem;
  height: 2rem;
  background: black;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: -200%;
  top: 98%;
}

그 결과 다음과 같은 CodePen이 생성됩니다.

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

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