CSS 로고: Vue 로고

Strava logo from the previous article은 제가 Vue 로고를 다시 만들도록 영감을 주었습니다.
비슷한 모양을 사용하므로 다른 기술을 시도할 수 있습니다.

Vue 로고의 경우 하나의 div만 사용하도록 도전했고 로고는 반응형이어야 합니다.

로고는 다음과 같습니다.

로고 분석

로고가 서로 위에 있는 V 기호를 기반으로 하는 것을 볼 수 있습니다. 이것을 보는 또 다른 방법은 삼각형입니다.

녹색 레이어, 어두운 레이어 및 흰색 상단의 세 삼각형도 볼 수 있습니다.

이 과제의 주요 어려움은 확장 가능하게 만드는 것입니다.

CSS Vue 로고

하나의 div만 사용하여 시작할 것이므로 설정해 보겠습니다.

<div class="vue"></div>

그런 다음 중요한 요령은 테두리가 요소의 총 크기에 포함되도록 모든 것을 box-sizing: border-box로 설정하는 것입니다.

테두리를 사용하여 실제 요소의 스타일을 지정하므로 이것이 필요합니다.

*,
*:before,
*:after {
  box-sizing: border-box;
}

그런 다음 로고의 기본 크기를 root variable으로 설정하려고 합니다.

:root {
  --size: 50vmin;
}

주요 요소부터 시작하겠습니다.
기본 스타일링을 위해 너비를 크기 변수로 설정하려고 합니다. 그런 다음 aspect-ratio 을 사용하여 비율을 올바른 크기로 설정합니다.

내가 적용한 트릭은 이 요소의 글꼴 크기를 너비로 설정하는 것입니다. 이렇게 하면 "확장 가능한"테두리를 만들 수 있습니다.
아시다시피 테두리 너비는 백분율을 허용하지 않으므로 크기를 조정하는 것은 어렵습니다.
이 트릭을 em 값과 함께 사용하여 요소의 너비에 맞게 크기를 조정합니다.

.vue {
  position: relative;
  width: var(--size);
  aspect-ratio: 15/13;
  border-style: solid;
  border-width: 0.865em 0.5em 0 0.5em;
  border-color: #41b883 transparent transparent transparent;
  font-size: var(--size);
  display: grid;
  place-items: center;
}

우리는 상자의 한 면에만 색칠하여 보여주기에 완벽한 삼각형을 만듭니다.
다른 면도 색칠하면 다음과 같이 됩니다.



이것은 이미 우리의 기본 모양입니다. 내부의 더 어두운 삼각형의 경우 :before 요소에 동일한 접근 방식을 사용할 수 있습니다.

.vue {
  &:before {
    content: '';
    position: absolute;
    top: -0.865em;
    border-style: solid;
    border-width: 0.52em 0.3em 0 0.3em;
    border-color: #34495e transparent transparent transparent;
  }
}

마지막으로 필요한 요소는 컷아웃 효과입니다.
이를 위해 :after 선택기를 사용합니다.

.vue {
  &:after {
    content: '';
    position: absolute;
    top: -0.865em;
    border-style: solid;
    border-width: 0.2em 0.115em 0 0.115em;
    border-color: white transparent transparent transparent;
  }
}

이것으로 기사를 마치고 이 CodePen에서 결과를 볼 수 있습니다.

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

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