[CSS] GRADATION

 

linear-gradient : 선형 그라데이션

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

- 방향 : 'to' 키워드와 함께 사용

속성 값	설명
to top	아래에서 시작해 위로
to left	오른쪽에서 시작해 왼쪽으로
to right	왼쪽에서 시작해 오른쪽으로
to bottom	위에서 시작해 아래로

 

접두사	브라우저 버전	'위치' 속성 값
-webkit-	사파리 5.1 ~ 6.0	그라데이션 시작 위치 기준
-moz-	파이어폭스 3.6 ~ 15	그라데이션 끝 위치 기준 ('to' 키워드 사용하지 않음)
-o-	오페라 11.1 ~ 12.0	그라데이션 끝 위치 기준 ('to' 키워드 사용하지 않음)

 

- 각도 : 색상이 바뀌는 방향을 알려주는 또 다른 방법

  - 'deg'로 표기

  - 맨 윗부분이 0deg이고, 시계 방향으로 회전하면서 90deg, 180deg이 됨

 

- color-stop (색상 중지 점) : 바뀌는 부분의 색을 지정

  - 색과 함께 중지 점의 위치를 지정

background-image : -webkit-linear-gradient(top, blue, white 30%, grey);

  -> blue가 시작 색상, white 30%가 중지 점 색상과 위치, grey가 끝 색상

 

 

radial-gradient : 원형 그라데이션

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

 

- 모양 : circle(원형)과 ellipse(타원형)이 있는데, 따로 지정하지 않으면 ellipse로 인식

 

- 위치 : 'at' 키워드와 함께 위치 값 지정

 

- 크기 : 원의 크기 지정

  - closest-side 속성 : 원일 경우, 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 모서리와 만남

                             타원일 경우, 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 수평축이나 수직축과 만남

  - closest-corner 속성 : 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 코너에 닿도록 함

  - farthest-side 속성 : 원의 경우, 그라데이션 가장자리가 그라데이션 중심에서 가장 먼 모서리와 만남

                              타원의 경우, 그라데이션 가장자리가 그라데이션 중심에서 가장 먼 모서리와 만남

  - farthest-corner 속성 : 그라데이션 가장자리가 그라데이션 중심에서 가장 먼 코너에 닿도록 함 (기본 값)

 

- color-stop : 색상이 바뀌는 부분

  - 색상과 색상이 바뀌는 위치도 함께 지정 가능

 

 

repeating- : 그라데이션 반복

- 선형 : repeating-linear-gradient

- 원형 : repeating-radial-gradient