CSS - Gradient
보통 웹 페이지의 텍스트는 검은색 아니면 배경에 따라 흰색 또는 단색계열로 많이 지정한다.
그라데이션 효과를 많이 사용하진 않지만 그렇다고 막 쓰기도 힘든것이 호환성?문제가 있다 브라우저 버전을
항상 최신으로 하는 것이 아니기 때문에 일부 하위버전에서는 적용이 안되는 큰 단점이 있다.
그라데이션은 css background 속성에 linear-gradient, radial-gradient 값으로 줄 수가 있다. 대충 포토샵을 사용해 봤으면 저 두개의 값이 어떤 효과를 주는지는 짐작이 갈거라고 생각이 든다. linear 는 세로,가로 형태로 그라데이션을 표현하고 radial은 원형 형태로 효과를 줄 수 있다.
1.
그라데이션은 위와 같은 형태로 효과를 줄 수 있다. 가로,세로 방향에서는 반복도 가능하고 rainbow처럼 단계별로 표현이 가능하다. 또한 단위를 px,% 등 여러 단위로 색상의 범위를 설정 할 수도 있다. 대각선으로 줘야할 경우는 deg나 bottom right 와 같은 형태로 적용이 가능하다.
2.
원형 그라데이션 같은 경우에는 가로세로와 비슷한 성질이지만 3,4같은 경우에는 조금 다르다. 3의 경우에는 box의 가로와 세로의 길이가 정사각형이아닐때 그라데이션 형태를 결정하는 Circle,Ellipse 값으로 정할 수 있다. 4번의 경우에는 그라데이션의 위치를 정하는 값을 줄 수가 있다.
3.
배경에 그라데이션을 줄 수 있지만 글씨에도 그라데이션을 줄 수 있다. 기본적으로 주는 방식은 비슷하고 background-clip,text-fill-color 속성을 이용하면 적용이 가능하다. 그리고 2번째 글씨는 mask-image라는 속성인데 백그라운드와 비슷한 속성인거 같다.
