CSS 관점 텍스트 만들기

오늘 저는 재미있는 CSS 효과를 만들고 그것이 어떻게 이루어졌는지 알아보고 싶었습니다.

오늘 우리는 텍스트가 계단처럼 보이도록 CSS 관점 텍스트를 만들고 있습니다.
본질적으로 우리는 이 효과를 만들기 위해 약간의 기울이기 변형과 위치 오프셋을 사용할 것입니다.

오늘의 최종 결과:

HTML 구조

HTML에 관해서는 그다지 화려한 것이 필요하지 않습니다.

<h1>
  <span>Always</span>
  <span>deliver</span>
  <span>quality</span>
</h1>

제 경우에는 효과로 사용할 세 단어를 갖고 싶습니다.
단락과 함께 작동하도록 코드베이스를 변경할 수도 있습니다.

CSS 관점 텍스트

이제 마법의 요소인 CSS로 넘어갑니다.
기본h1 요소의 스타일 지정부터 시작하겠습니다. 목표는 산세리프체로 상당히 크게 보이도록 만드는 것입니다.
이 효과에 가장 적합합니다.

h1 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 70px;
  font-weight: 900;
  text-transform: uppercase;
  position: relative;
  margin-left: -350px;
  margin-top: -150px;
}

보시다시피 저는 꽤 큰 글꼴을 사용하고 모든 것을 너무 대문자로 변환합니다.
그런 다음 전체 요소를 상쇄합니다. 절대 위치를 사용할 것이기 때문에 전체 요소를 한 번에 배치하기가 어렵습니다.
사용하려는 단어에 따라 이러한 위치를 변경해야 할 수도 있습니다.

그런 다음 h1 내부의 각 범위 요소는 절대적이어야 합니다.

h1 {
  span {
      position: absolute;
  }
}

다음 규칙은 스텝 스큐를 반대 방향으로 만드는 것입니다. odd/even child pseudo-selector을 사용하고 있습니다.

h1 {
  span {
    &:nth-child(odd) {
      transform: skew(60deg, -30deg) scaleY(0.66667);
    }
    &:nth-child(even) {
      transform: skew(0deg, -30deg) scaleY(1.33333);
    }
  }
}

그것은 우리를 매우 가깝게 해주지만 이제 모든 요소가 서로 위에 있습니다.
두 번째 이상의 요소마다 오프셋 위치를 수정해야 합니다.

제 말로는 다음과 같습니다.

h1 {
  span {
    &:nth-child(2) {
      left: 27px;
      top: 52px;
    }
    &:nth-child(3) {
      left: 54px;
      top: 105px;
    }
    }
}

그리고 그게 다야. 이제 매우 멋진 계단 모양의 원근 텍스트가 생겼습니다.

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

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