CSS gradient 속성

<Today's Goals>

• 그러데이션 효과 적용
• 선형 그러데이션 
• 원형 그러데이션
• 그러데이션 반복

<What i learned>

• 그러데이션 효과는 브라우저와 버전별로 사용법이 다르다.

<Questions>

• 한번에 여러개의 그러데이션을 적용할 수 있나?
• 각기 다른 방향으로 생성이 가능한가?

---

<색상과 배경을 위한 스타일>

그러데이션 효과로 배경 꾸미기

그러데이션과 브라우저 접두사

그러데이션 함수를 이용해 만드는 배경은 크기가 없는 배경 이미지이므로 그러데이션 값을 background-image속성 값이나 background속성값으로 지정한다.

---

선형 그러데이션

linear-gradient(<각도> to <방향>, color-stop, [color-stop,..]);

방향

'to' 키워드를 함께 사용

• to top : 아래에서 위로
• to bottom : 위에서 아래로
• to right : 왼쪽에서 오른쪽으로
• to left : 오른쪽에서 왼쪽으로

각도

각도이고 그 값은 'deg'로 표기.

맨 윗부분이 0deg이고 시계 방향으로 회전하면서 90deg, 180deg가 됩니다.

 

색상 중지 점(color-stop)

색상 중지점을 지정할 때는 색상과 함께 중지 점의 위치도 함께 지정할 수 있다.

%와 함께 사용 

linear-gradient(to bottom, #fff, blue 30%, #fff00);

blue 30% : 중지점 색상 blue, 30% 지점에 색상 중지점 위치

---

원형 그라데이션

radial-gradient(<최종 모양> <크기> at <위치>, color-stop, [color-stop,...])

모양 

따로 지정하지 않으면 타원형으로 인식한다.

• circle(원형)
• ellipse(타원형)

 

위치

사용할 수 있는 위치 값은 키워드와 백분율이 있다.

생략할 경우 가로, 세로 모두 center로 인식한다.

radilal-gradient(circle at 10% 10%, white,blue);

가로 10%, 세로 10% 위치

 

 

크기

• closest-side 속성 값 : 원형은 그러데이션 중심에서 가장 가까운 가장자리와 만나고, 타원형은 중심에서 가장 가까운 요소의 수평축이나 수직축과 만난다.
• closest-corner 속성 값 : 그러데이션 가장자리가 중심에서 가장 가까운 코너에 닿는다.
• farthest-side 속성 값 : 중심에서 가장 먼 모서리와 만난다.
• farthest-corner 속성 값 : 중심에서 가장 먼 코너에 닿는다. (기본 값)

 

색상 중지 점 (color-stop)

지정된 색상이 2개면 시작과 끝, 3개면 시작과 끝 그리고 중앙, 4개면 시작과 끝, 2/4,3/4 지점식으로 자동 계산된다.

 

---

그러데이션 반복

• 선형 그러데이션 : repeating-linear-gradient
• 원형 그러데이션 : repeating-ridial-gradient

자연스러운 그러데이션 생성

'yellow,red 20px' 형태로 따로 구간을 지정하지 않고  옵션을 사용하면 자연스럽게 그러데이션이 들어간다.

이때 yellow ->  orange -> red로 자연스러운 그러데이션이 들어간다.

 

스트라이프 형태로 그러데이션 생성

시작 색상과 끝 색상을 명확히 구분해 주면 색상이 중간에 섞이지 않고 두개 이상의 색상을 반복적으로 표시할 수 있다.

'yellow, yellow 20px, red 20px, red 40px'

(0~20px까지 yellow, 20~40px까지 red)

위의 형태로 반복해서 작성할 경우 구분이 뚜렷한 스트라이프 형태의 그러데이션이 생성된다.