[기본 개념] 3 | (3.2) 그라데이션

[기본 개념] 3 | (3.2) 그라데이션

1 배경색과 배경 범위 지정하기

2 배경 이미지 지정하기

3> 그라데이션 효과로 배경 꾸미기

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

선형 그라데이션

 

기본형

linear-gradient (to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>,  ...]) ;

 

방향

 수평방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용하여 끝 지점을 기준으로 to 예약어와 함께 사용한다.

 

 (ex.  방향을 사용해 선형 그라데이션 만들기)

 

...
  .grad {
    background : blue;	// 지원하지 않는 웹 브라우저용
    background : linear-gradient(to right bottom, blue, white); 
    // 왼쪽 위에서 오른쪽 아래 방향으로, 파란색에서 흰색으로
  }
</style>
...

 

각도

 각도는 그라데이션이 끝나는 부분이고 값은 deg로 표기한다. 맨 윗부분이 0deg이고, 시계방향으로 회전하며 90deg, 180deg가 된다.

 

 (ex. 각도를 사용해 선형 그라데이션 만들기)

 

...
  .grad {
    background : f000;	// 지원하지 않는 웹 브라우저용
    background : linear-gradient(45deg, #f00, #fff); 
    // 45도 방향, 빨간색에서 흰색으로
  }
</style>
...

 

색상 중지점

 2가지 색 이상의 선형 그라데이션을 만들려면 색상이 바뀌는 부분을 지정해줘야 한다. 여기서 바뀌는 색을 색상 중지점이라 한다. 쉼표(,)로 색상을 구분하고, 중지점의 위치도 지정할 수 있다.

 

 (ex. 선형 그라데이션의 색상 중지점 지정하기)

 

...
  .grad {
    background : #06f;	// 지원하지 않는 웹 브라우저용
    background : linear-gradient(to bottom, #06f, white 30%, #06f);
    // 위에서부터 30% 위치에 색상 주지점 지정
  }
</style>
...

 

원형 그라데이션

 

기본형

radial-gradient (<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>,  ...]) ;

 

모양

 원형 그라데이션에서 만들어지는 모양은 원형(circle)과 타원형(ellipse 기본형)이다.

 

 (ex. 원형 그라데이션의 모양 지정하기)

 

...
<style>
  .grad1 {
    background : red;	// 지원하지 않는 웹 브라우저용
    background : radial-gradient(white, yellow, red);
    // 모양을 지정하지 않으면 타원형
  }
  .grad2 {
    background : red;	// 지원하지 않는 웹 브라우저용
    background : radial-gradient(circle, white, yellow, red);
    // 원형
  }
</style>
...

 

크기

 원의 모양과 크기를 나타내는 키워드 값을 함께 쓰면 원의 크기도 정할 수 있다.

 

속성값	설명
closest-side	그라데이션 가장자리가 중심에서 가장 가까운 요소의 측면이 닿을 때까지 그린다.
closest-corner	그라데이션 가장자리가 중심에서 가장 가까운 요소의 꼭짓점에 닿을 때까지 그린다.
farthest-side	그라데이션 가장자리가 중심에서 가장 먼 요소의 측면이 닿을 때까지 그린다.
farthest-corner	그라데이션 가장자리가 중심에서 가장 먼 요소의 꼭짓점에 닿을 때까지 그린다.

 

위치

 at 키워드와 함께 지정하면 그라데이션이 시작하는 원의 중심을 다르게 나타낼 수 있다.

 

 위치 속성값은 키워드 (left, center, right 중 하나 또는 top, center, bottom 중 하나) 또는 백분율이다. 속성값을 생략하면 모두 center로 인식한다.

 

 (ex. 위치 키워드를 사용해 원형 그라데이션 만들기)

 

...
  .grad {
    background : blue;	// 지원하지 않는 웹 브라우저용
    background : radial-gradient(circle at 20% 20%, white, blue);
    // 원형 그라데이션, 20% 20% 위치, 흰색에서 파란색 지정
  }
</style>
...

 

색상 중지점

 그라데이션의 색상과 어느 부분에서 색상이 바꿀지 위치도 함께 지정할 수 있다.

 

 (ex. 원형 그라데이션의 색상 중지점 지정하기)

 

...
  .grad {
    background : skyblue;	// 지원하지 않는 웹 브라우저용
    background : radial-gradient(yellow, white, orange);
    // 색상 중지점 지정
  }
</style>
...

 

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)