CSS 로고: 일일 개발자 로고

물론 CSS에서 고용주의 로고를 다시 만드는 것을 거부할 수 없었습니다. 물론 우리는 daily.dev에 대해 이야기하고 있습니다.

로고 자체는 아래와 같이 기본 모양처럼 보입니다.

로고 분석

로고를 보면 3개의 뚜렷한 부분이 보입니다.

왼쪽 사각형

가운데 선이

오른쪽 화살표

어떻게 보느냐에 따라 왼쪽 부분이 d 로 보일 수도 있지만 그렇게 되면 더 어려워집니다.

이 설정에는 약간 까다로울 수 있는 몇 가지 사항이 있습니다.
사각형은 모서리가 둥글고 내부에 사각형이 있습니다.
가운데 선에는 사다리꼴 테두리가 있습니다.
화살표는 둥글기 때문에 HTML 화살표를 사용할 수 없습니다.

걱정 마세요, 우리가 이 일을 해낼 거에요.

CSS daily.dev 로고

필요한 모든 요소를 ​​설정하여 시작하겠습니다.

<div class="dd">
  <div class="square"></div>
  <div class="stripe"></div>
  <div class="arrow"></div>
</div>

보시다시피 분석 섹션에서 설명한 내용에 따라 명명을 반영하려고 했습니다.

자, 재사용할 수 있는 일부 기본값CSS variables도 추가하고 싶습니다.

:root {
  --bg: #151618;
  --radius: 20px;
  --gray: #989899;
}

본문은 이것을 배경색으로 만들고 내부의 모든 것을 중앙에 배치하려고 합니다.

body {
  background: var(--bg);
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

그런 다음 포장 div를 지정하고 하나의 특정 크기로 만들고 싶습니다. 확장할 수는 없지만 크기와 테두리 반경을 조정하여 확장할 수 있습니다.

.dd {
  position: relative;
  width: 350px;
  aspect-ratio: 350/200;
  overflow: hidden;
}

그런 다음 사각형 요소 만들기로 이동하겠습니다. 모서리가 둥근 사각형을 추가하고 :before pseudo element을 사용하여 내부에 또 다른 사각형을 오버레이해야 하므로 이 방법이 더 쉽습니다.
그런 다음 전체 사각형을 회전하고 그에 따라 배치합니다.

Note: Throughout this article, I'll use SCSS since it's easier to make it visually explained.

.square {
  width: 42.857%;
  aspect-ratio: 1;
  background: white;
  border-radius: var(--radius);
  transform: rotate(45deg);
  top: 11.5%;
  position: absolute;
  left: 6.571%;
  z-index: 1;
  display: grid;
  place-items: center;
  &:before {
    content: '';
    width: 50%;
    aspect-ratio: 1;
    background: var(--bg);
    position: absolute;
  }
}

이것이 제자리에 있으면 다음 사각형을 얻어야 합니다.



다음으로 필요한 요소는 가운데 줄무늬입니다.
회전하는 직사각형 모양일 수도 있습니다.

또한 로고를 반영하도록 왼쪽 상단 및 오른쪽 하단 테두리 반경을 설정했습니다.

.stripe {
  width: 11.429%;
  height: 130%;
  background: white;
  position: absolute;
  transform: rotate(45deg);
  border-radius: var(--radius) 0px var(--radius) 0px;
  left: 44.286%;
  top: -16%;
  z-index: 3;
}

이 요소의 까다로운 부분은 기울어진 삼각형이 나중에 사각형과 화살표의 일부 조각을 잘라내기를 원한다는 것입니다.
나는 다시 pseudo elements을 사용하기로 결정했습니다. 또 다른 직사각형 모양을 만들었지만 사다리꼴 모양처럼 보이도록 기울이기 변환을 사용했습니다.

.stripe {
  &:before,
  &:after {
    content: '';
    position: absolute;
    width: 35%;
    height: 100%;
    background: var(--bg);
  }
  &:before {
    left: -35%;
    bottom: 7%;
    transform: skewY(71deg);
  }
  &:after {
    right: -35%;
    top: 7%;
    transform: skewY(71deg);
  }
}

아래 이미지에서 무슨 일이 일어나고 있는지 볼 수 있도록 도형을 분홍색으로 칠했습니다.



완벽합니다. 검은색으로 칠하면 원하는 모양이 됩니다.
이제 남은 것은 오른쪽의 화살표입니다.

앞서 언급했듯이 이 모양은 모서리가 둥글기 때문에 작업이 조금 더 복잡해집니다.

(직선 모서리로 작업할 때 테두리가 두 개만 보이는 사각형 상자를 사용자에게 제공할 수 있습니다.)

그러나 걱정하지 마십시오. 우리의 좋은 친구인 pseudo elements이 다시 유용합니다.
화살표의 경우 서로 겹치는 두 개의 둥근 사각형을 사용합니다.

.arrow {
  position: absolute;
  width: 11.429%;
  height: 150%;
  left: 78.286%;
  top: 31.5%;
  z-index: 2;
  &:before,
  &:after {
    content: '';
    position: absolute;
    background: var(--gray);
    border-radius: var(--radius);
    display: block;
    left: -5%;
    height: 50%;
    width: 100%;
    transform: rotate(45deg);
  }
  &:after {
    bottom: 76%;
    transform: rotate(-45deg);
  }
}

아래 이미지에서 어떤 일이 일어나고 있는지 볼 수 있도록 빨간색 하나와 파란색 하나를 칠했습니다.



그리고 그게 다야. 결과가 궁금하십니까?
이 CodePen을 확인하십시오.

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

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