이 포스트에서는 CSS로 그라데이션 텍스트를 구현하는 방법을 설명합니다.
예전에는 텍스트에 그라데이션을 입히려면 이미지 파일을 사용하거나 텍스트 한 글자씩 색을 입히는 방식을 사용해야만 했으나, CSS를 이용하면 이런 방식을 쓰지 않고도 간단하게 그라데이션 텍스트를 구현할 수 있습니다.
다음 CSS 코드를 봅시다.
.gradtext {
background: #55ffaa;
background: -webkit-linear-gradient(left, #55ff55, #55ffff);
background: -moz-linear-gradient(right, #55ff55, #55ffff);
background: -o-linear-gradient(right, #55ff55, #55ffff);
background: linear-gradient(to right, #55ff55, #55ffff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 48px;
font-weight: bold;
}
일단 2번 줄부터 6번 줄까지는 CSS로 선형 그라디언트 구현하기 포스트에서 설명했던 그 것과 같습니다. 이 예제에서는 왼쪽의 연두색부터 시작해서 오른쪽으로 갈수록 청록색이 되는 그라디언트를 배경으로 합니다.
중요한 것은 7번 줄과 8번 줄입니다. 일단 8번 줄부터 설명하자면 background-clip 속성은 배경을 칠할 범위를 지정하는 속성으로 border-box, padding-box, content-box, text의 4가지가 있습니다.
- border-box
- 외곽선의 비어 있는 부분까지 배경을 칠합니다. (기본값)
- padding-box
- 외곽선 부분은 칠하지 않지만 안쪽 여백까지는 배경을 칠합니다.
- content-box
- 안쪽 여백 부분도 칠하지 않고 오로지 내용이 들어갈 부분만 배경을 칠합니다.
- text
- 텍스트를 따라서 배경을 칠합니다. 추가된 지 얼마 되지 않아 아직 지원이 완전하지 않습니다.
7번 줄은 8번 줄의 프로퍼티 이름에서 -webkit- 접두어를 붙여 먼저 추가한 줄입니다. 텍스트를 따라서 칠하는 CSS는 아직까지는 지원이 완전하지 않아서 -webkit- 접두어가 필요한 상황이기 때문입니다.
9번 줄은 글자 색깔을 무색(투명)으로 만드는 코드입니다. 이게 중요한 이유는, 배경을 칠할 범위를 텍스트로 한정했는데 텍스트 색이 들어가게 되면 텍스트를 따라 칠한 배경을 글자 색깔로 가려버리기 때문입니다. 따라서 글자 색을 무색으로 설정해야만 텍스트를 따라 칠해진 배경을 볼 수 있게 됩니다.
그리고 10번 줄과 11번 줄은 텍스트를 크고 굵게 만드는 코드입니다. 이 설정은 필수적인 것은 아니지만 이 예제에서는 확인을 위해 설정하였습니다.
<span class="gradtext">Hello, world!</span>
위와 같이 설정된 속성을 적용해 보면,
Hello, world!
이렇게 텍스트를 따라 칠해진 그라디언트를 볼 수 있을 것입니다.
그라디언트가 아닌 배경 이미지도 같은 방법으로 이 CSS를 적용할 수 있습니다.
주의
- 이 CSS를 text-shadow와 혼용할 경우 의도하지 않은 결과가 생기므로 혼용하지 않는 것을 권장합니다.
- 인터넷 익스플로러에서는 아직 이 CSS를 지원하지 않습니다.