[CSS3] 텍스트에 명암(Gradient)넣기 (feat.그라디언트 생성 툴)

css에서는 background에 그라디어언트를 줄 수 있는 속성이 존재한다.

 

1. linear-gradient

2. radial-gradient

 

이 두가지 속성을 활용하면 백그라운드에 원하는 형태로 그라디언트를 삽입 할 수 있는데, 다른 속성과 결합하면 텍스트에도 그라디언트 효과를 줄 수 있다.

 

그전에 우선 css로 그라디언트를 만들고자 할 때 유용한 툴을 소개하고자한다.

 

CSS Gradient — Generator, Maker, and Background

 

위의 툴을 이용하면 원하는 그라디언트의 색상,각도,위치를 선택하면 자동으로 크로스브라우징까지 대응해주는 코드를 만들어준다.

 

그라디언트 코드 생성

 

 

위와 같이 원하는 그라디언트 코드를 생성했다면, 필자는 아래와 같은 HTML 마크업에 그라디언트를 주려고한다.

<h1>
    Hello, This GRADIENT
</h1>

 

그리고 css는 아래와 같이 작성해준다.

h1 {
	/** CSS Ggradient에서 생성해온 그라디언트 css 소스 **/
    background: rgb(2,0,36);
    background: -moz-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    
    /** color는 투명색상을 뜻하는 transparent 기입 **/
    color: transparent;
    
    /** 
    * background를 어디에 걸지(clip) 기준점을 설정하는 background-clip속성에 text 기입 *
    * 크로스브라우징 대응을 위해 벤더프리픽스 -webkit-을 걸어 추가 작성 *
    **/
    background-clip: text;
    -webkit-background-clip: text;
    
    /** font style **/
    font-size: 80px;
    font-weight: 700;
    margin-bottom: 50px;
}

 

위와같이 그라디언트 속성과 color, backgroudn-clip속성을 사용하면 아래와 같은 결과물이 생성된다.

 

이 속성을 잘 활용하면, 이제 디자인 시안에서 텍스트 및 타이틀에 그라디언트, 혹은 이미지가 들어간다하더라도 

디자인 시안에있는 텍스트를 이미지로 잘라낼 필요없이 직접 코드로도 구현이 가능해진다. 

 

그렇다면 유지보수 및 운영면에서 비용을 절감 할 수 있게 될 것이며 시각적으로도 훌륭한 웹 사이트를 만들 수 있게 될 것이다.

 

- 참고로, 그라디언트 속성은 background-color가 아닌 background-image속성이기때문에, 또 다른 백그라운드 이미지를 활용해도 같은 결과를 만들어 낼 수 있다.