[CSS 입문] 그러데이션 효과

그러데이션을 지원하지 않는 브라우저와 접두사를 붙여 사용하는 브라우저까지 고려해 함께 입력해야합니다.

      background: #ff0000; /* CSS3 미지원 브라우저*/

      background: -webkit-linear-gradient(45deg, #ff0000, #ffffff); /* 초기 모던 브라우저 */

      background: -moz-linear-gradient(45deg, #ff0000, #ffffff); /* 초기 모던 브라우저 */

      background: -o-linear-gradient(45deg, #ff0000, #ffffff); /* 초기 모던 브라우저 */

      background: linear-gradient(45deg, #ff0000, #ffffff); /* 최신 모던 브라우저 */

이때 선형 그러데이션 함수나 원형 그러데이션 함수를 이용해 만드는 배경은 크기가 없는 배경 이미지이므로 그러데이션 값을 background-image 속성 값이나 background의 속성 값으로 지정합니다.

1. 선형 그러데이션

liner-gradient( <각도> to <방향>, color-stop, [color-stop,..]);

위의 구문이 표준 구문이지만 '위치'와 '각도'를 표시하는 방법이 브라우저별, 버전별 사용법이 조금씩 다르기 때문에 구분해 사용해야 합니다.

접두사	브라우저 버전	'위치' 속성 값
-webkit-	사파리 5.1 ~ 6.0	그러데이션 시작 위치 기준
-moz-	파이어폭스 3.6 ~ 15	그러데이션 끝 위치 기준. 키워드 to 사용하지 않음
-o-	오페라 11.1 ~ 12.0	그러데이션 끝 위치 기준. 키워드 to 사용하지않음

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

      background: #06f; /* css3 미지원 브라우저 */

      background-image: -webkit-linear-gradient(top, #06f, white 30%, #06f); /* 초기 모던 브라우저 */

      background-image: -moz-linear-gradient(bottom, #06f, white 30%, #06f); /* 초기 모던 브라우저 */

      background: -o-linear-gradient(bottom, #06f, white 30%, #06f); /* 초기 모던 브라우저 */

      background: linear-gradient(to bottom, #06f, white 30%, #06f); /* 최신 모던 브라우저 */

2. 원형 그러데이션

원형 그러데이션에서 만들어지는 모양은 circle(원형)과 ellipse(타원형)입니다. 따로 지정하지 않으면 ellipse로 인식합니다.

radial-gradient( <최종 모양> <크기> at <위치>, color-stop, [color-stop,..]);

표준 구문에서는 '모양'과 '크기' 속성 다음에 at 키워드와 함께 위치 값을 지정하는데 브라우저 접두사를 붙이는 구문사에서는 at 키워드 없이 구문의 맨 앞부분에 위치를 표시합니다.

      background: blue;

      background: -webkit-radial-gradient(10% 10%, circle, white,blue);

      background: -moz-radial-gradient(10% 10%, circle,white,blue);

      background: -o-radial-gradient(10% 10%, circle, white,blue);

      background: radial-gradient(circle at 10% 10%,white,blue);

그러데이션을 지정할 때 원의 크기도 지정할 수 있는데 크기에서 사용할 수 있는 값은 다음과 같습니다.

속성 값	설명
closest-side	원의 경우, 그러데이션 가장자리가 그러데이션 중심에서 가장 가까운 요소의 모서리와 만날 때까지 그림 타원의 경우, 그러데이션 중심에서 가장 가가운 요소의 수평축이나 수직축과 만날 때까지 그림
closest-corner	그러데이션 가장자리가 그러데이션 중심에서 가장 가까운 요소의 코너에 닿을 때까지 그림
farthest-side	그러데이션 가장자리가 그러데이션 중심에서 가장 먼 모서리와 만날 때까지 그림
farthest-coner	그러데이션 가장자리가 그러데이션 중심에서 가장 먼 코너에 닿을 때까지 그림. 기본 값

원형 그러데이션도 선형 그러데이션처럼 그러데이션 색상뿐만 아니라 색상이 바뀌는 위치도 함께 지정할 수 있습니다.

    background:skyblue;

    background:-webkit-radial-gradient(red, yellow 20%, skyblue);

    background:-moz-radial-gradient(red, yellow 20%, skyblue);

    background:-o-radial-gradient(red, yellow 20%, skyblue);

    background:radial-gradient(red, yellow 20%, skyblue);

3. 그러데이션 반복

선형 그러데이션을 반복할 때는 repeating-linear-gradient를 사용하고 원형 그러데이션을 반복할 때는 repeating-radial-gradient를 사용합니다.

      background: red; /* css3 미지원 브라우저 */

      background: -webkit-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */

      background: -moz-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */

      background: -o-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */

      background: repeating-linear-gradient(yellow, red 20px); /* 최신 모던 브라우저 */

반복되는 선형 그러데이션을 만들 때 다음과 같이 시작 색상과 끝 색상을 명확히 구분해 주면 색상이 중간에 섞이지 않고 두개 이상의 색상을 반복적으로 표시할 수 있습니다.

      background: red; /

      background: -webkit-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);

      background: -moz-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);

      background: -o-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px); 

      background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);

<출처> Do it! HTML5+CSS3 웹 표준의 정석