[CSS3] gradient 속성알아보기

liner-gradient

<!-- chrome, safari --> 

background:-webkit-gradient(linear,left top, left bottom,color-stop(0,#a6cd2f),color-stop(1,#6e9102));

<!-- mozilla --> 

background:-moz-linear-gradient(top,#a6cd2f,#6e9102); 

<!-- IE --> 

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#a6cd2f', EndColorStr='#6e9102',       GradientType=0);

1. type (유형)

type 에는 linear(선형) 과 radial(방사형 또는 원형) 중에서 선택할 수 있다.

2. 시작위치

시작위치는 left top 식으로 사용해도 되고, 10 20 등과 같은 공백으로 분리된 좌표값, 또는 10% 20% 와 같은 백분율도 사용이 가능합니다.

3. 끝위치

끝위치는 left bottom 식으로 사용해도 되고, 10 20 등과 같은 공백을로 분리된 좌표값, 또는 10% 20% 와 같은 백분율도 사용이 가능합니다.

4. 색상시작점

색상을 표시하는 값은 위처럼 rgb(238, 238, 238) 이나, hex(#eee or #eeeeee) 또는 키워드 등 모두 사용이 가능 하다. 

빨강색으로 표시된 곳을 보면 0% 나 0 으로도 사용할 수 있다.

이것은 시작위치를 나타내는 것으로 시작위치는 0 이다.

5. 색상 끝점.

색상을 표시하는 값은 위처럼 rgb(170, 170, 170) 이나 hex(#aaa or #aaaaaa) 또는 키워드 등 모두 사용이 가능하다.

빨강색으로 표시된 곳을 보면 100% 나 1 로도 사용할 수 있다.

이것은 색상끝점을 나타내는 것으로 끝위치는 1 이다.

radial-gradient

<!-- chrome, safari --> 

background:-webkit-radial-gradient(center, ellipse cover,  rgb(238,238,238) 0%,rgb(170,170,170) 100%);

<!-- mozilla --> 

background:-moz-radial-gradient(center, ellipse cover,  rgb(238,238,238) 0%,rgb(170,170,170) 100%); 

<!-- IE --> X

1. type 유형.

선형 그라데이션에도 보셨듯 이것은 원형 그라데이션을 말합니다.

2. 중심점.

cirlce 또는 타원의 중심점을 말합니다. top, left, center, right 등 키워드를 사용합니다.

기본값은 center 입니다.

3. shape 모양.

원형 그라데이션에서의 모양은 그냥 radial(원형) 과 ellipse(타원형) 이 있습니다.

기본값은 타원형인 ellipse 입니다.

4. size 크기.

크기는 closest-corner , farthest-side , farthest-corner , contain , cover 등을 사용할 수 있습니다.

기본값은 cover 입니다.

5. lenght 길이.

이는 타워의 가로 세로의 길이를 말합니다. 여기서의 길이는 원의 직경이 아니라 반지름입니다. 그래서 음수는 사용이 안됩니다.

6. percentage 백분율.

타원형 즉 ellipse 의 가로 세로축의 비율을 의미합니다. 이 비율로 모양이 정해집니다. 당연이 음수는 사용이 안됩니다.

7. color_stop 색상 값.

이는 color_stop , color , stop 등을 사용할 수 있습니다. 시작과 끝을 포함하여 여러 색상을 표현할 수 있습니다.

색상의 시작값과 끝값을 정해야 합니다.

이는 생략하면 안되는 필수값입니다.