CSS 로고: Dribbble 로고

재창조할 로고에 대한 영감을 찾는 동안 Dribbble(디자이너 소셜 네트워크)을 검색했습니다. 그런 다음 Dribbble 로고를 만들지 않겠습니까?

우리가 다시 만들 것은 다음과 같습니다.

로고 분석

로고가 제품 이름에 대한 참조인 농구공을 나타내는 것을 볼 수 있습니다.

언뜻 보면 둥근 모양에 세 개의 선이 있는 것을 알 수 있습니다.
둥근 모양의 범위를 벗어나면 이 세 개의 선이 그 위에 앉아 있는 더 큰 둥근 모양을 볼 수도 있습니다.

따라서 CSS에서 이것을 다시 만들려면 둥근 윤곽선으로 시작하고 일부 하위 요소를 사용하여 세 개의 추가 줄을 배치해야 합니다.

우리의 외부 모양은 초과 라운드를 숨기기 위해 오버플로 없음을 받습니다.

CSS 드리블 로고

HTML 설정부터 시작하겠습니다. 가능한 한 깔끔하게 유지하고 싶기 때문에 하나의 div와 하나의 추가 요소만 사용하겠습니다.

<div class="dribbble">
  <span></span>
</div>

두 번 이상 필요하므로 컨테이너 크기와 테두리 스타일을 설정하기 위해 일부root variables를 생성해 보겠습니다.

:root {
  --size: 15rem;
  --border: 1em solid #c32361;
}

그런 다음 메인 볼 라운드 아웃라인을 만들어 봅시다.

.dribbble {
  position: relative;
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  background-color: #ea4c89;
  border-radius: 50%;
  border: var(--border);
  border-radius: 100%;
}

이렇게 하면 작업할 수 있는 둥근 표면이 됩니다.



이 공에서 주목해야 할 중요한 사항은 overflow: hidden 입니다. 이 속성은 이 모양 외부에 아무것도 표시되지 않도록 합니다.

이제 하나의 요소(span)로 세 개의 겹치는 모양을 얻는 방법이 궁금할 것입니다.

그리고 질문은 pseudo elements 입니다. 이 경우에는 :before 및 :after를 사용하여 상단 및 하단 라인을 만듭니다. 그리고 중간 스팬.

세 가지 모두에 대해 동일한 설정 선택기부터 시작하겠습니다. 다음 코드는 SCSS이므로 자주 복사하여 붙여넣을 필요가 없습니다.

.dribbble {
  &:before,
  &:after,
  span {
    content: '';
    position: absolute;
    border: var(--border);
    border-radius: 100%;
  }
}

여기서 위치를 절대값으로 설정하고 테두리를 테두리 변수로 설정하고 반지름을 100%로 설정하여 모양을 둥글게 만듭니다.

Note: Nothing will show up yet as we haven't set the sizes.

윗선과 아랫선의 크기를 빠르게 설정해 봅시다.

.dribbble {
  &:before,
  &:after {
    width: 125%;
    height: 60%;
  }
}

이렇게 하면 공에 두 개의 줄임표 모양이 추가됩니다.



이제 상단과 하단에 남은 것은 올바르게 배치하는 것입니다. 또한 원근감을 더하기 위해 회전을 적용합니다.

.dribbble {
  &:before {
    top: -24%;
    left: -32%;
    transform: rotate(349deg);
  }
  &:after {
    bottom: -30%;
    left: -5%;
    transform: rotate(332deg);
  }
}

이 코드는 상단과 하단이 올바르게 표시되도록 합니다.



다음 부분은 스팬 요소를 사용할 중간 선입니다.
이것은 동일한 기술을 사용하지만 너비보다 높이를 더 크게 조정합니다.

.dribbble {
  span {
    width: 80%;
    height: 150%;
    top: -26%;
    left: -26%;
    transform: rotate(340deg);
  }
}

그리고 그게 다야. 이제 CSS에 Dribbble 로고가 있어야 합니다.
이 CodePen에서 완성된 결과를 볼 수 있습니다.

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

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