[JS] linear-gradient

linear-gradient

• 두 개 이상의 색상이 직선을 따라 점진적으로 변화되는 선형 그라데이션 이미지를 생성.
• gradient date type의 object이며, image의 특별한 종류 중 하나이다.
• gradient는 image data type에 속하기 때문에, image가 사용되는 곳에만 쓰일 수 있다. background-color 속성이나 color date type을 사용하는 다른 속성에는 적용할 수 없다.

/* 45도 경사를 기준으로 
  파란색에서 시작해서 빨간색으로 변화하는 그라데이션 */
linear-gradient(45deg, blue, red);

/* 오른쪽 아래에서 왼쪽 위로,
  파란색에서 시작해서 빨간색으로 변화하는 그라데이션 */
linear-gradient(to left top, blue, red);

/* 색이 중지되는 지점을 명시. 아래에서 위로 시작하여,
   파란색에서 시작한 뒤 총 길이의 40% 지점에서 초록색으로 변화하고,
   마지막에는 빨간색으로 변화하는 그라데이션 */
linear-gradient(0deg, blue, green 40%, red);

/* 색상 힌트. 왼쪽에서 오른쪽으로,
   빨간색에서 시작한 뒤 그라데이션의 길이의 10% 지점에서 중간 색상에 도달하여
   나머지 90%의 길이는 파란색으로 변화하는 그라데이션 */
linear-gradient(.25turn, red, 10%, blue);

/* 여러 색 중지 지점을 명시. 45도 경사를 기준으로
   왼쪽 아래의 절반은 빨간색, 오른쪽 위의 절반은 파란색으로
   뚜렷한 선을 기준으로 변화하는 그라데이션 */
linear-gradient(45deg, red 0 50%, blue 50% 100%);

ex)
/* 45도 각도를 가지는 그라데이션 */
body {
  background: linear-gradient(45deg, red, blue);
}

/* 그라데이션 선의 60% 지점부터 시작되는 그라데이션 */
body {
  background: linear-gradient(135deg, orange 60%, cyan);
}