🍍 이번에는 텍스트에 그라데이션을?

인간은 발전의 동물이다 .. 하나가 가능하면 다른 하나도 가능할 거라고 생각하기 때문.
열심히 연구해서 border에 그라데이션을 넣었더니 이번에는 텍스트 그라데이션을 넣어달라 한다.

가능하냐구요? 글쎄요 .. 저도 가능한지 안한지는 이제부터 알아봐야 할 거 같은데요 ..


다행히 우리의 선생님인 구글은 안나오는게 없다.
심지어 ..

https://www.cssportal.com/css-text-gradient-generator/
이렇게 텍스트 그라디언트로 변환해주는 사이트까지 있다.

🖐 잠깐 !
https://cssgradient.io/
background 자체를 변환해주는 사이트도 있으니 힘들게 한땀한땀 넣지말고 유용하게 사용하세용.

사실 이런 사이트가 있다는건 꽤나 대중적으로 사용되고 있다는 것 ( 해외에서는 )

대충 원하는 색상 뽑아서 돌려보면

이런 아름다운 그라데이션이 나온다.

텍스트 내부에 background로 그라데이션을 넣기 위해서는 3개의 속성이 필요하다.

💥 background-image 배경넣을때만 사용했나요?

아마 배경에 gradient를 넣어본 사람이라면 다들 알겠지만, css에서 linear-gradient는 색상이 아닌 '이미지' 이다. 즉, background: linear-gradient() 를 열심히 넣어봤자 우리의 브라우저는 꿈쩍도 안 할 것이다 !

앞서 공유한 https://cssgradient.io/ 에서 대충 원하는 색상을 하나 찝은 후에

background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

라는 속성을 넣어주면

짜잔 ! 신기하게도 아무런 일이 일어나지 않았습니다.

💥 background-clip 이놈 참 신세계고만

우리가 적.극 활용해야하는 속성은 바로 background-clip
자세한 내용은 우리의 선생님 https://developer.mozilla.org/ko/docs/Web/CSS/background-clip 에서 볼 수 있다.

이 속성은 border에 gradient를 넣을때도 활용을 한 속성이다.
border-box가 아닌 text 값을 입력해준다면 text 자체에 background-image가 차지를 하게 된다.

단, 주의해야 할 점은

크롬의 경우 -webkit- 라는 벤더프리픽스와 사용을 해야만 지원이 되기 때문에

background-clip:text;
-webkit-background-clip:text;

이 두가지를 모두 넣어줘야 크롬에서도 정상적으로 작동하는 모습을 볼 수 있다.

💥 text-fill-color color를 대체할 수 있는 속성!

마지막으로 필요한 속성은 text-fill-color 속성이다.

해당 속성에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color 여기에서 확인할 수 있다. 한가지 슬픈건 한글번역이 안되어있다는것 ㅠ_ㅠ

당.연.히 익스는 지원안됨 ! 그니까 텍스트에 그라디언트를 넣어달라는 요청이 들어왔는데 무조건 익스를 맞춰야하는 프로젝트라면 텍스트 자체를 img로 넣어서 해결하자 ..

text-fill-color는 -webkit-이라는 접두어를 붙여서 사용을 해야하는 속성이다. 즉, 벤더프리픽스를 활용하지 않는다면 어떤 브라우저든 정상적으로 보이지 않는다는 것 !

❓ -webkit-text-fill-color VS color

MDN에서 속성에 대한 내용을 읽다보니 이런 내용이 있었다.

CSS 속성 은 텍스트 문자의 -webkit-text-fill-color채우기 색상 을 지정합니다. 이 속성이 설정되지 않은 경우 속성 값 color이 사용됩니다.

그러면 굳이 -webkit-text-fill-color를 사용할 필요가 없잖아 팍씨
실제로

-webkit-text-fill-color:transparent;

color:transparent;

두가지 속성의 결과값은 동일하게 나온다.
이 과정에서 나는 아나 그럴거면 더 대중적인 color로 사용하는게 낫지않나? 라고 생각했다.

그럴때는 우리의 제2의 선생님 스택오버플로우에서 찾아보면 되지 않는감 !!

https://stackoverflow.com/questions/9287552/difference-between-webkit-text-fill-color-and-color
역시 사람들이 궁금해하는건 다 고기서 고기란 말야~

역시 친절보스ㅋ 아무래도 text-fill-color가 비표준이다보니까 어느브라우저에서든 항상 정상적으로는 보일 수 없는 불안정한 속성이다.
그래서 대체제 역할로 color값을 설정을 해주는 것 같다.
만약 color:transparent; 로 통일을 해버린다면 상황에 따라 간혹 텍스트 자체가 보이지 않는 대참사가 이루어질 수 있을 확률이 존재하기 때문에 각각 설정을 해서 사용하는게 아닌가 하는 내 추측이다 -ㅅ- !

💥 전체코드내놔

background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

html코드는 p태그에 텍스트만 넣어놓으면 되기 때문에 CSS만 있어도 충분히 활용할 수 있다.
굿 -ㅅ- !

참고로
background-image대신

background: url('../img/ocean.jpg') no-repeat center bottom / cover;

와 같은 이미지를 넣어도

아주 예뽀리하게 작동한당ㅋ 이렇게 보니 역시 우리의 적은 익스가 아닌가 싶ㄷr ..

이제는 디자이너가 텍스트 안에 그라데이션 가능해요 ?-? 라고 물어봐도 당황하지 말고

훗- 이런것쯤ㅇiㅇr 하며 당당하게 긍정의 표시를 해봅시다 !