<HTML5+CSS3>그라데이션 효과로 배경 꾸미기

선형 그라데이션

-수직 방향이나 수평 방향으로, 혹은 대각선 방향으로 색상이 일정하게 변하는 것.

방향과 색상을 반드시 알려주어야 한다.

 

선형 그러데이션 구문

ex)linear-gradient(각도or위치,color-stop,[color-stop,..]);

%단, 접두사를 사용한 선형 그러데이션과 위치 값은 다를 수 있으므로 454pg참고

 

다음은 왼쪽 아래에서 오른쪽 위 방향으로 빨간색이 점점 흰색 배경으로 바뀌어 가도록 그러데이션을 각도 구문으로 적용한 것이다.

ex)linear-gradient(45deg,#ff0000,#ffffff) ->45도 빨간색, 흰색

 

 

(2)위치 : 각도 대신 위치로 그러데이션 방향을 지정할 수도 있다. 이때 위치는 그러데이션이 끝나는 위치를 나타내므로 to top이나 to right처럼 to 키워드와 함께 위치를 나타내는 키워드를 사용한다. 생략하면 to bottom으로 인식.

 

위치 값

(2)-(1) to top : 아래에서 시작하여 위로 만들어진다

(2)-(2) to left : 오른쪽->왼쪽으로 만들어짐

(2)-(3) to right: 왼쪽->오른쪽으로 만들어짐

(2)-(4) to bottom: 위->아래쪽으로 만들어진다.

 

ex)linear-gradient:(to bottom,blue,white); ->위에서 아래로 파란색에서 흰색으로

 

% 이 역시 마찬가지로 접두사를 사용한 위치 값이 따로 있으니 456pg참고

(3)color-stop , [color-stop, ...]

-선형 그러데이션을 만들기 위해 바뀌는 부분의 색을 지정해 줘야한다. 그러데이션에서 바뀌는 색을 색상 중지 점(color-stop)이라고 하는데, 색상만 지정할 수도 있고 색상과 함께 중지 점의 위치도 함께 지정할 수 있다.

 

ex)background:linear-gradient(to bottom, #06f, white 30%, #06f)

->위에서 아래로 시작색:#06f, 30%위치에서 흰색으로 다시 바뀌고 다시 #06f색으로 바뀜.

 

 

%현재까지 인터넷 익스플로러 브라우저에는 이 속성을 지원하지 않기 때문에 따로 배경색을 지정해줘야 한다. ex)background:skyblue;

원형 그러데이션

-원형 그러데이션은 색상이 바뀌기 시작하는원(or타원(ellipse))의 중심과 원(or타원)의 크기를 지정하고 그러데이션의 모양을 원과 타원중에서 지정합니다.

 

원형 그러데이션 구문

ex)radial-gradient(위치,모양( 및 크기), color-stop, [color-stop,...] )

 

(1)위치: 시작하는 원의 중심을 지정. 가로=left,center,righr 중 세로=top,center,bottom중 가로 위치와 세로 위치에 해당하는 키워드를 선택할 수도 있고 30%나 20%처럼 백분율로 값을 사용하기도 한다. 생략하면 center인 중앙 위치로 인식

 

(2)모양 및 크기 : 이부분은 460page참고

(3)color-stop,[color-stop,..]

-원형 그러데이션에서 색상이 바뀌는 부분을 색상 중지 점이라고 하는데, 이 중지 점의 색을 원하는 색으로 지정할 수 있다. 색상만 지정할 수도 있고 색상과 함께 위치도 지정할 수 있다.