CSS 로고: 개발자 로고

CSS Logos의 두 번째 기사에서는 dev.to 로고 중 하나를 다시 만듭니다.

탐색할 수 있는 꽤 멋진 CSS 효과가 있으므로 무지개 로고를 선택합니다.

이것은 우리가 다시 만들고 있는 것입니다:

Note: I won't use this exact font as their logo is no font, but an SVG.

로고 분석

글꼴을 사용하여 빌드할 수 있음을 빠르게 확인할 수 있습니다. 로고가 SVG 기호이므로 기본 글꼴을 사용하겠습니다.

그런 다음 텍스트에 6가지 색상으로 구성된 그래디언트 오버레이가 표시됩니다.

우리가 작업해야 할 몇 가지 사항:

Overlap text with a CSS Gradient

CSS 그라데이션 반복

하드 스톱 CSS 그라디언트

CSS DevTo 로고

이 로고를 시작하겠습니다. 가장 먼저 할 일은 텍스트를 추가하고 멋지게 크게 만드는 것입니다.

<h1>DEV</h1>

h1 {
  margin: 0;
  padding: 0;
  line-height: 8rem;
  display: inline-block;
  font-family: arial;
  font-size: 10rem;
}

다음으로 집중하고 싶은 부분은 하드 스톱 CSS입니다. 기본적으로 그라디언트는 일종의 부드러운 전환이기 때문입니다.

빨강-파랑에서 그라데이션이 되는 두 개의 블록을 만들어 의미하는 바를 보여드리겠습니다.

<div class="gradient box"></div>
<div class="gradient-hard box"></div>

기본 그래디언트의 경우 다음과 같이 사용할 수 있습니다.

.gradient {
  background-image: linear-gradient(red 0%, blue 100%);
}

그리고 하드 스톱을 위해 동일한 비율로 색상의 두 번째 배치를 정의해야 합니다.

.gradient {
  background-image: linear-gradient(red 0%, red 50%, blue 50%, blue 100%);
}

우리는 0-50%에서 빨간색을 표시한 다음 50-100%에서 파란색을 표시한다고 말합니다. 이렇게 하면 오버플로 또는 부드러운 그라데이션 전환이 발생하지 않습니다.

이 CodePen 예제에서 결과를 볼 수 있습니다.



다음 단계는 그래디언트를 반복하는 방법을 확인하는 것입니다. 이 단계에서는 그라디언트를 완전히 채우지 않는 것이 중요합니다.

현재 100%를 모두 사용했음을 의미합니다. 0~5%와 5~10%를 사용하다가 중지한다고 말할 수 있습니다.

그런 다음 배경을 repeating-linear-gradient로 설정할 수 있습니다. 이렇게 하면 매번 반복됩니다.

하드 스톱 빨강-파랑 그래디언트에서 이것을 시도해 봅시다.

.gradient-hard-repeat {
  background-image: repeating-linear-gradient(
    red 0%,
    red 5%,
    blue 5%,
    blue 10%
  );
}

위의 CodePen에서 이미 결과를 볼 수 있습니다.

그런 다음 이것을 텍스트 위에 표시하는 것이 작업입니다.
텍스트 요소의 배경을 설정하는 것만큼 간단합니다.

h1 {
  ...
  background: repeating-linear-gradient(...);
}

그러나 블록 예제에서 본 것처럼 큰 블록으로 표시됩니다.
텍스트만 커버하기 위해 다음 두 가지 속성을 추가할 수 있습니다.

h1 {
    ...
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

이렇게 하면 텍스트의 배경 클립과 텍스트 채우기가 투명해집니다(그래디언트가 표시됨).

그리고 짜잔! 이제 우리는 환상적인 효과를 얻었습니다.
마지막 단계는 실제 Dev.to 색상을 추가하는 것입니다.

그리고 이 CodePen에서 완성된 코드를 볼 수 있습니다.

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

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