CSS의 그라데이션 텍스트

웹 사이트를 눈에 띄게 만드는 것은 어려울 수 있습니다.

랜딩 페이지나 헤더를 개선할 수 있는 작은 요령이 있습니다. 그라데이션 텍스트를 사용하세요.

남용하지 않도록하십시오. 더 긴 텍스트에는 그라데이션을 사용하면 안 됩니다. 대신 제목이나 특정 단어를 더 눈길을 끄는 데 사용하십시오.

특히 디자인 도구에 대한 사전 경험이 있는 경우 놀라운 점은 그라디언트를 텍스트 색상으로 직접 설정할 수 없다는 것입니다. 예를 들어 color: linear-gradient(yellow, red);는 작동하지 않습니다.

그러나 그라디언트 텍스트는 CSS에서 얻을 수 있으며 몇 가지 추가 단계만 필요합니다.

크고 바람직하게는 굵은 텍스트로 시작하는 것이 가장 좋습니다. 이렇게 하면 그라데이션이 더 잘 보이고 텍스트를 더 쉽게 읽을 수 있습니다.



내가 사용할 텍스트는 다음 값을 사용하여 스타일이 지정됩니다.

font: bold 120px Poppins, sans-serif;

1단계: 그라디언트 추가

먼저 그라디언트를 배경으로 추가해야 합니다.



기본적으로 그라디언트는 위에서 아래로 이동하지만 방향을 지정할 수도 있습니다.

수평 그래디언트를 원하는 경우 to right가 트릭을 수행하지만 60deg와 같은 약간의 각도가 더 자연스럽게 보입니다.

background-image: linear-gradient(60deg, #E21143, #FFB03A);

원하는 그라디언트를 만드는 방법을 배우고 싶거나 단순히 복습이 필요한 경우 my .

2단계: 클립

이제 그라디언트가 텍스트가 있는 위치만 표시하도록 해야 합니다. background-clip 를 사용하여 그렇게 할 수 있습니다.

To learn more about this and other background properties, check out my article explaining .

이 속성을 사용하면 배경을 요소의 테두리, 안쪽 여백 또는 콘텐츠box로 자를 수 있다는 것을 이미 알고 계실 것입니다.

그러나 배경을 텍스트로 자를 수도 있습니다.

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
  background-clip: text;
}

이 코드를 사용하면 그래디언트가 사라진 것처럼 보일 것입니다. 그라디언트가 텍스트 아래에 있기 때문입니다.

3단계: 공개

텍스트 아래에 그라디언트를 표시하려면 텍스트를 투명하게 만들어야 합니다. color: transparent 를 설정하면 됩니다.

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
  background-clip: text;
  color: transparent;
}

여기를 사용하고 싶을 수도 있습니다. 하지 않다.

안타깝게도 background의 background-clip 속기 버전은 text 키워드를 지원하지 않습니다.

폴백

Internet Explorer를 지원해야 하는 경우 단색으로 대체해야 합니다.

이전에 작성한 모든 내용을 @supports 규칙으로 래핑합니다. 이렇게 하면 최신 브라우저에서만 렌더링됩니다.

그런 다음 @supports 블록 외부에서 텍스트의 대체 색상을 설정합니다. 그레이디언트에 나타나며 디자인의 나머지 부분과 잘 어울리는 색상이어야 합니다.

.gradient-text {
  color: red;
}

@supports (background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(60deg, #E21143, #FFB03A);
    background-clip: text;
    color: transparent;
  }
}

폴백이 실제 그래디언트 스타일보다 먼저 오는지 확인하세요.

NOTE: Even though the @supports rule itself is also not supported in IE, everything inside will still be ignored, which is exactly what we want.

읽어 주셔서 감사합니다. 유용한 것을 배웠기를 바랍니다. 질문이 있으시면 의견에 질문하십시오. 더 많은 웹 개발 팁을 보려면

당신이 즐길 수 있는 다른 기사들