CSS로 레트로 텍스트 효과 만들기

14088 단어 webcssdesign
이 기사에서는 CSS로 80년대 스타일의 텍스트 효과를 만들어 보겠습니다. 이 효과는 여러 text-shadow , background-clip , filter , 선형 그라디언트 및 -webkit-text-stroke를 사용하여 멋진 금속성 효과를 얻습니다.

실제 CSS에 들어가기 전에 최종 결과를 보고 싶을 것입니다.



사용할 HTML 마크업을 정의하는 것으로 시작하겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Retro effect with CSS</title>
  </head>
  <body>
    <div class="container">
      <h1 class="title">
        <span class="metal clip raise">Retro</span><br>
        <span class="metal clip raise">effect</span>
      </h1>
      <h2 class="subtitle">With CSS</h2>
    </div>
  </body>
</html>


HTML 마크업에는 컨테이너div 요소와 두 개의 헤더 요소가 있습니다. h1 요소에는 레트로 및 효과 텍스트가 있는 두 개의 span 요소가 있습니다. 텍스트는 span개 요소로 분할되어 두 요소에 개별적으로 효과를 적용할 수 있습니다.
container , title 및 subtitle 클래스는 대부분 위치 지정 규칙을 정의하므로 다루지 않습니다. GitHub repo에서 전체 CSS 코드를 찾을 수 있습니다.
span 요소에는 효과를 정의하는 데 사용할 두 개의 클래스가 있습니다. metal CSS 클래스를 추가하여 텍스트의 금속 채우기를 만들어 보겠습니다.

HTML의 head 태그 안에 다음 코드를 추가합니다.

<style type="text/css">
  .metal {
    background: linear-gradient(
      hsl(239, 50%, 30%) 15%,
      hsl(239, 50%, 40%) 25%,
      hsl(200, 60%, 50%) 35%,
      hsl(100, 70%, 80%) 45%,
      hsl(60, 100%, 98%) 50%,
      hsl(240, 0%, 0%) 52%,
      hsl(240, 10%, 10%) 60%,
      hsl(240, 50%, 30%) 70%,
      hsl(220, 70%, 60%) 80%,
      hsl(212, 92%, 76%) 85%
    );
  }
</style>


그러면 10가지 색상의 선형 그라데이션으로 구성된 텍스트의 배경이 정의됩니다. 출력은 다음과 같습니다.



그라디언트는 진한 파란색에서 거의 흰색에 가까운 녹색으로 이동한 다음 검은색으로 전환되고 그라데이션이 옅은 파란색으로 전환됩니다. 이것은 금속 반사 및 광택 효과를 만듭니다.

하지만 그라데이션을 배경이 아닌 텍스트 채우기로 사용하려면 어떻게 해야 할까요? 이것은 background-clip 규칙을 사용하여 수행할 수 있습니다. .metal 클래스에 다음 규칙을 추가해 보겠습니다.

.metal {
  /* ... */ 
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}



background-clip: text 텍스트에서 클리핑 마스크를 만들어 배경을 렌더링할 때 마스크로 사용합니다. 클리핑 마스크 영역만 렌더링됩니다. 텍스트 자체도 렌더링되므로 배경을 덮지 않도록 color: transparent를 추가해야 합니다. WebKit 기반 브라우저에서 작동하려면 -webkit-background-clip: text 를 추가해야 합니다.

다음으로 광택 😜으로 텍스트에 테두리를 추가합니다. border: ...만 추가하면 전체 요소에 대해 상자 모양의 테두리가 생기지만 이는 우리가 원하는 것이 아닙니다. 🤔

다행히 supported by all the major browsers except IE 인 비표준 CSS 규칙-webkit-text-stroke이 있습니다. Firefox 및 Edge는 webkit 접두어 버전을 지원하며 자체 접두어가 없습니다.

.metal {
  /* ... */ 
  -webkit-text-stroke: 2px hsl(200, 65%, 80%);
}




멋진! 남은 것은 3D 효과를 추가하는 것뿐입니다. 스택의 모든 수준에서 오프셋을 늘리고 색상을 변경하여 여러 그림자를 쌓는 깔끔한 트릭을 사용하여 효과를 얻을 수 있습니다. CSS에는 우리가 사용할 수 있는 text-shadow 규칙이 있지만 불행히도 그림자가 배경 위에 그려지기 때문에 background-clip와 잘 작동하지 않습니다 😔

그러나 CSS Filter effects에는 우리가 사용할 수 있는 drop-shadow 필터도 있습니다.
raise 규칙을 사용하여 CSS에 새 클래스filter를 추가해 보겠습니다. 여기에는 3D 효과용 필터 5개drop-shadow와 실제 그림자용 필터 1개가 포함되어 있습니다.

.raise {
  filter: drop-shadow(1px 3px 0px hsl(242, 54%, 10%))
    drop-shadow(1px 3px 0px hsl(242, 54%, 15%))
    drop-shadow(1px 3px 0px hsl(242, 54%, 20%))
    drop-shadow(1px 3px 0px hsl(242, 54%, 25%))
    drop-shadow(1px 3px 0px hsl(242, 54%, 30%))
    drop-shadow(0px 0px 10px rgba(16, 16, 16, 0.4));
}




광도를 높여 같은 색상을 사용하여 그라데이션 효과를 만듭니다. 필터 효과가 작동하는 방식 때문에 오프셋은 모두 같은 값을 가집니다. 여러 필터drop-shadow를 추가하면 각 후속 그림자는 이전 그림자의 결과를 그림자 윤곽선으로 사용합니다. 따라서 오프셋을 3px로 유지하면 각 단계에서 3px씩 증가합니다.

CodeSandbox demo의 With CSS 텍스트는 두 개의 text-shadows를 사용하여 파란색과 노란색 그림자를 만듭니다.
단순화를 위해 글꼴 및 위치 지정 CSS 규칙을 생략했습니다.

.subtitle {
  /* ... */
  transform: rotateZ(-10deg);
  color: hsl(318, 100%, 51%); /* pink */ 
  text-shadow: -2px -3px hsl(53, 100%, 81%) /* yellow */, 5px 5px hsl(240, 90%, 61%); /* blue */
}


더 알아보기



MDN on background-clip
MDN on text-shadow
CSS-Tricks article on filter effects
CSS-Tricks article on -webkit-text-stroke
슈퍼 문외한이 렌더맨을 놀려봐~ RIB 파일편을 만들어봐~
슈퍼 문외한이 RendarMan~RIB 파일을 가지고 노는 카메라의 시점편~

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage