CSS3의 그라데이션

* 선형 그라데이션 지정하기

- background 등 이미지와 관련된 프로퍼티에 linear-gradient() 함수를 사용하면 형(평행) 그라데이션으로 칠할 수 있음.

 

background:linear-gradient(45deg, red, white);

 

   : 그라데이션 방향

- 다음 방법 중 하나를 지정함. 생략하면 위에서 아래쪽으로 그라데이션 됨.

1) 시작 위치를 bottom left 등으로 지정

2) 각도를 45deg 등으로 지정

3) 종료 위치를 to top right 등으로 지정

※ Firefox는 1)과 2)를 함께 쓸 수 있음.

   : 시작색

   : 종료색

 

- 여러 개의 색을 지정할 수 있고, 변화 위치를 지정할 수도 있음.

 

background:linear-gradient(left, gray 0%, red 30%, white 80%);

 

 

* 원형 그라데이션 지정하기

 

- CSS3에서는 선형 그라데이션 외에 한 점에서 방사형으로 퍼지는 원형 그라데이션을 나타낼 수도 있음.

 

background:radical-gradient(center, circle closest-side, red, white);

 

   : 중심 위치(생략 가능)

- center(중앙) 또는 10px, 20px와 같이 중앙에서 떨어진 위치를 지정함.

   : 모양

- circle(원)이나 ellipse(박스의 모양에 맞춘 타원)를 지정함.

   : 크기

- 그라데이션의 원 크기를 지정함.

- 아래의 값을 사용할 수 있음.

closest-side  contain	원의 중심에서 가장 가까운 박스의 변에 내접함.
closest-corner	원의 중심에서 가장 가까운 박스의 모서리에 내접함.
farthest-side	원의 중심에서 가장 먼 박스의 변에 외접함.
farthest-corner  cover	원의 중심에서 가장 먼 박스의 모서리에 외접함.

 

   : 시작색 (복수색 지정 가능)

   : 종료색 (복수색 지정 가능)

 

 

* 투명색 지정하기

- CSS3에서는 색으로 불투명도(알파 값)를 지정하여 반투명한 요소를 그릴 수 있음.

 

background-color:rgba(230, 120, 120, 0.5);

   : 0~1.0의 수치를 지정함.

 

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
linear-gradient	X	-moz-	-o-	-webkit-	-webkit-
radical-gradient	X	-moz-	-o-	-webkit-	-webkit-
rgba	O	O	O	O	O

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)