[Css] 글자,텍스트에 그라데이션 만들기 & 예제

 

 

 

안녕하세요. 키미추추입니다.

이번에 [코딩_첫강좌]로 CSS로 글자에 그라데이션 만들기를 오픈하였습니다.

이미지와 설명,예제를 통해 누구나 쉽게 따라할 수 있는 코너로 개설되었으니 설명을 잘 읽어주세요.

 

 

[Htrml강좌] 클릭시 특정 위치로 이동하기와 예제보기

 

 

키미추추 블로그 제목에 마우스를 갖다대면? 

저는 마우스를 갖다댈때 그라데이션 효과가 나타나도록 따로 속성을 주었기 때문에

텍스트에 핑크색에서 파랑색으로 자연스럽게 이어지는 예쁜 그라데이션 효과가 나옵니다.

 

 

 

 

 

 

우선 css,html에서 글자에 색상을 입히는 방법은 매우 쉽습니다.

color: #색상코드;만 써주기만 하면 내가 원하는 색상으로 글자색이 쉽게 바뀌는데 반면 한 가지 단색으로만 되니 그라데이션 효과주기는 어려웠을 거예요.

 

 

---

 

 

1.코드 적용하기

일반적으로 color에서는 단색 적용만 되는데, 백그라운드 속성의 linear-gradient를 통해 그라데이션 효과를 줄 수 있습니다.

그리고 효과주려는 것이 글자이니 두번째 줄처럼 background-clip을 텍스트로 지정해줍니다.

마지막으로 글자 채우기를 transparent로 속성을 선택해주어야 글자를 자연스럽게 여러가지 컬러로 채울 수가 있습니다.

색상은 내가 원하는만큼 두 가지 컬러를 사용해도 되고, 두 색상 이상으로 사용해도 됩니다.

 

 

background: linear-gradient(to right, #671cc4, #5673bc, #5673bd);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;

 

 

 

 

 

 

 

2.응용하기

위에서는 linear-gradient를 to right로 지정해놓았기 때문에 글자의 색상이 왼쪽에서(보라) 오른쪽으로(파랑) 나타납니다.

반대로 오른쪽에서(파랑) 왼쪽에(보라) 있는 색상 순서대로 나타내기 위해서는 to left로 지정을 해줍니다.

간단하죠?

 

 

 

 

 

 

 

 

3. 예제

 

색상은 html색상표를 참고하여 원하는 색상을 사용하면 됩니다.

 

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////