CSS3 폰트 글자에 그라데이션 그라디언트 넣기 (Font Gradient)

폰트에도 과연 그라데이션을 적용할 수 있을까 싶어서 바로 구글링을 해보니 역시 방법이 있습니다. 신비롭고 다양한 코딩의 세상입니다. CSS에서 구현이 가능합니다. 하지만 애시당초 그라디언트(Gradient) 속성이 각 브라우저마다 지원하는게 달라서 여기에서 나오는 방법대로라고 한다면, 일부 브라우저에서는 사용이 불가합니다. 제가 사용하는 방법은 크롬과 Webkit 을 기준으로 합니다.

 

See the Pen CSS3 : Font Gradient by rgy0409 (@rgy0409) on CodePen.

 

위에 있는 예제들을 살펴보시면서 설명을 드리겠습니다. 원래는 벤더 프리픽스 부분만 따로 모으고, 색상 변화를 줘야하는 그라디언트 부분만 따로따로 적용시키려 했는데, 이게 안 되더라구요. 한마디로 폰트에 그라디언트를 적용시키기 위해서는 반드시 같은 스타일내에 한 묶음으로 세트로 구성하셔야 적용이 된다는 이야기 입니다. CSS에서 그라디언트가 적용된 핵심 부분만 따로 아래에 적어두도록 하겠습니다.

 

.p1 {
    background: linear-gradient(to right, #f00, #00f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.p2 {
    background: linear-gradient(to left, #f00 40%, #00f 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.p3 {
    background: linear-gradient(to right bottom, #f00, #00f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.p4 {
    background: linear-gradient(to right top, #f00 30%, #00f 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.p5 {
    background: linear-gradient(to right, #f00 10%, #00f 15%, #0f0 35%, #f0f 50%, #0ff 60%, #ff5800 75%, #f05 87%, #ff7fd3 95%, #326d18 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.p6 {
    background: linear-gradient(to right, #f00, rgba(0, 0, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.p7 {
    background: linear-gradient(to bottom, #f00, rgba(0, 0, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

이렇게 이루어져 있습니다. 먼저 p1 스타일의 경우는 가장 기본형태 입니다.

 

background: linear-gradient(방향, 시작색상, 끝색상); ▶ 직선 형태의 그라디언트 기본형태

-webkit-background-clip: text; ▶ 텍스트에만 백그라운드 적용

-webkit-text-fill-color: transparent; ▶ 텍스트를 투명하게

 

이렇게 세개가 하나의 묶음입니다. 따로 떨어지면 안 됩니다. 현재 확인결과 익스플로러에서는 적용이 되지 않습니다. 아마 차후에는 버전이 올라가면서 적용이 될 것입니다. 그리고 위에서도 말씀드렸듯 각 브라우저마다 사용 엔진이 달라서 모든 브라우저가 하나로 통합이 될 때까지는 이 부분은 어쩔 수 없이 하나하나 지원하도록 코딩을 하던지 아니면 호환성을 위해서 벤더 프리픽스나 아예 포토샵에서 작업해서 이미지화하여 올리는 방법밖에는 없습니다.

 

p1의 경우는 background를 linear 스타일로 지정하고, to right 즉, 오른쪽을 향해 적용되는 그라데이션 입니다. 빨간색에서 나중에 마크업 한 파란색으로 적용됩니다.

 

p2의 경우는 방향만 반대이면서 색상 옆에 보시면 %로 숫자가 들어갔습니다. 이것은 포토샵에서의 로케이션 (Location) 값에 해당됩니다.

 

포토샵 그라데이션 패널. 로케이션 위치에 따라 스타일을 다르게 만들 수 있다.

바로 위에 나온 스크린샷 부분입니다. 위치에 따라서 그라디언트의 스타일이 달라지기 때문에 잘 생각하셔서 적용시켜보시기 바랍니다.

 

p3의 경우는 방향을 대각선으로 설정했습니다. right bottom 두개가 들어갔으니 결국 오른쪽 아래를 향해 그라데이션이 진행됩니다. 결국 시작점은 왼쪽 상단에서부터 진행이 됩니다.

 

p4의 경우는 반대 대각선 입니다. right top 이므로 오른쪽 상단을 향해 진행됩니다.

 

p5의 경우는 색상을 여러개 집어넣을 수 있다는 것을 보여줍니다. 포토샵 그라데이션 패널에서도 클릭하면 색상이 추가되는 것 처럼 말입니다. 그리고 각 색상은 로케이션 값을 가질 수 있습니다.

 

p6의 경우는 투명도를 가진 그라디언트 입니다. CSS에서 색상 표현은 16진수 혹은 rgba 값으로 입력이 가능한데, 이때 rgba에서의 a는 바로 알파값으로 투명도를 조절하는 부분입니다. 0부터 1까지 입력하며 소수점으로 표현할 수 있습니다. 예를들어서 8.2 라고 입력을 하면 투명도 82% 라는 뜻이 됩니다.

 

p7의 경우는 p6번에서 방향 설정만 다르게 한 경우입니다. 스타일은 6번과 같습니다.

 

이렇게 해서 폰트 글자에도 그라디언트를 넣을 수 있는 방법을 알게 되었습니다. 이제 배웠으니 써먹어야겠죠? 잘 몰라도 일단 무조건 한번은 코딩을 해보세요. 대충 감이 올 수도 있습니다. 지금 바로 적용시켜 보시기 바랍니다. 하지만 앞서 말씀드렸듯 이 부분은 브라우저의 영향을 많이 받습니다. 아직까지 한국이라는 나라는 익스플로러를 많이 사용합니다. 때문에 글자에 Gradient를 적용하는 것 보다는 아예 포토샵에서 글자에 그라데이션을 적용시켜서 png 파일로 만들고 이미지로 적용시키는게 더 나을수도 있습니다. 웹호환성을 위해서 말이죠. 끝.