[짧은 CSS팁] 그라디언트 타이포그래피
background-clip, text-fill-color 활용하기
움직이는 그라이언트가 들어간 타이포그래피, https://letter.co/CSS에서 텍스트에 색상을 넣는 기능은 color를 통해 가능합니다. 하지만 위와 같이 애니메이션이 들어가거나 색상의 변화가 부드럽게 해주려면 color 값만으로는 어색한 경우가 있습니다.
-webkit-text-fill-color
그라이언트 타이포그래피를 위해선 3가지 값이 필요합니다.
background: 앨리먼트의 배경
-webkit-text-fill-color: 텍스트 색상. color와 같은 기능이지만 상위의 권한이 있습니다.
background-clip: 배경값을 확장해 적용. border-box, padding-box, content-box, text 등을 값으로 받습니다.
결과는 다음과 같이 나타납니다.(코드팬 링크)
이제 애니메이션을 적용해봅니다. 그라이던트 애니메이션을 제작할 때는 크게 다음과 같은 구조로 만듭니다.
1. background-size 키우기
2. infinite loop 애니메이션 적용
3. 너무 빠르지 않은 트렌지션
주로 텍스트 그라이언트 애니메이션에선 background-size: 200% 100%;와 같이 변경해서 사용합니다. 좌우 너비를 넓혀주어야 애니메이션이 반복될 때 어색하지 않기 때문입니다. 만약 크기를 딱 떨어지게 만들려하면 background 값에 넣을 그라디언트의 시작 색상과 마지막 색상을 일치시켜야하고, 그 과정에서 어색하지 않게 조정해주는 과정이 필요합니다.
결과를 보면 위와 같이 나타납니다. 텍스트에 효과를 넣어주는 방법은 이렇게 할 수 있는데, 여기서 조금 더 나아가면 background-clip(스팩 문서)을 활용해 배경의 이미지를 테두리나 패딩, 텍스트에 넣는 방법에 차이를 주어 신선한 스타일을 적용할 수도 있습니다.
영문 버전: https://www.nomcss.com/css/css-gradient-typograph
