CSS 배경 그라데이션 효과

 

 

그라데이션과 브라우저 접두사

색상 그라데이션을 사용해 배경을 꾸밀 수 있다. 선형 그라데이션과 원형 그라데이션 총 두가지를 설명하려고 한다. 선형과 원형 그라데이션은 CSS3 에서 처음으로 소개된 기능이지만 구문이 복잡하고 브라우저 사이의 지원 방법이 달라 사용하기 어려웠다. 

 

현재의 표준화된 구문 외에도 그라데이션을 지원하지 않는 브라우저와 접두사를 붙여 사용하는 브라우저까지 고려해야할 필요가 있다.

접두사	브라우저 버전
-webkit-	사파리 5.1~6.0
-moz-	파이어폭스 3.6~15
-o-	오페라 11.1~12.0

 

예시)

.grad {
    background: blue;     /* 그라데이션을 지원하지 않는 브라우저용 */
    background: -webkit-linear-gradient(left top, blue, white);
    background: -moz-linear-gradient(right bottom, blue, white);
    background: -o-linear-gradient(right bottom, blue, white);
    background: linear-gradient(to right bottom, blue, white);   /* 표준 구문 */
}

 

 

 선형 그라데이션

선형 그라데이션은 색상이 수직이나 수평 또는 대각성 방향으로 일정하게 변하는 것을 말한다. 이것을 만들어 주는 것이 linear-gradient 함수이다.

/* 기본형 */
linear-gradient( <각도> to <방향>, color-stop, [color-stop], ... );

 

 

<방향>

 

그라데이션에서 방향을 지정할 때에는 끝 지점을 기준으로 'to' 키워드와 함께 사용한다. 속성값은 다음과 같다.

• to top : 아래에서 시작해 위로 그라데이션이 만들어진다.
• to left : 오른쪽에서 시작해 왼쪽으로 그라데이션이 만들어진다.
• to right : 왼쪽에서 시작해 오른쪽으로 그라데이션이 만들어진다.
• to bottom : 위에서 시작해 아래로 그라데이션이 만들어진다.

 

선형 그라데이션은 CSS3 속성이기 때문에 HTML5 와 CSS3 지원이 가능한 브라우저에서만 사용할 수 있다. 그러므로 접두사를 사용해야 한다.

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

 

예시)

/*  
	기본형 = linear-gradient( <각도> to <방향>, color-stop, [color-stop], ... );
*/

.grad {
    background: blue;     /* 그라데이션을 지원하지 않는 브라우저용 */
    background: -webkit-linear-gradient(left top, blue, white);
    background: -moz-linear-gradient(right bottom, blue, white);
    background: -o-linear-gradient(right bottom, blue, white);
    background: linear-gradient(to right bottom, blue, white);   /* 표준 구문 */
}

 

 

<각도>

 

선형 그라데이션에서 색상이 바뀌는 방향을 알려주는 또 다른 방법이 각도이다. 이때의 각도는 그라데이션이 끝나는 각도이며 'deg' 로 표기한다.

grad {
    background: blue;     /* 그라데이션을 지원하지 않는 브라우저용 */
    background: -webkit-linear-gradient(45deg, blue, white);
    background: -moz-linear-gradient(45deg, blue, white);
    background: -o-linear-gradient(45deg, blue, white);
    background: linear-gradient(45deg, blue, white);   /* 표준 구문 */
}

 

 

color-stop(색상 중지 지점)

 

색상 중지 지점이란 선형 그라데이션에서 바뀌는 부분의 색을 지정해주어야 하는데 바뀌는 지점을 색상 중지 지점이라고 한다. 색상 중지 지점을 지정할 때는 색상만 지정할 수도 있고 색상과 함께 위치도 지정할 수 있다.

 

 

예시 코드)

.grad {
    background: blue;     /* 그라데이션을 지원하지 않는 브라우저용 */
    background: -webkit-linear-gradient(top, blue, white 30%, red);
    background: -moz-linear-gradient(bottom, blue, white 30%, red);
    background: -o-linear-gradient(bottom, blue, white 30%, red);
    background: linear-gradient(to bottom, blue, white 30%, red);   /* 표준 구문 */
}

 

 

 원형 그라데이션

색상이 직선 형태로 바뀌는 것이 선형 그라데이션이라면 원형 그라데이션은 원이나 타원의 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀐다. 따라서 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그라데이션의 모양을 지정하는 작업이 필요하다.

/* 기본형 */
radial-gradient( <최종 모양> <크기> at <위치>, color-stop, [color-stop] )

 

 

<최종 모양>

 

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

 

예시)

아무것도 지정하지 않을 경우 ellipse(타원형)으로 기억한다.

.cirgrad1 {
    background: coral;
    background: -webkit-radial-gradient(white, yellow, coral);
    background: -moz-radial-gradient(white, yellow, coral);
    background: -o-radial-gradient(white, yellow, coral);
    background: radial-gradient(white, yellow, coral);
}

 

원형 모양 예시)

.cirgrad2 {
    background: coral;
    background: -webkit-radial-gradient(circle, white, yellow, coral);
    background: -moz-radial-gradient(circle, white, yellow, coral);
    background: -o-radial-gradient(circle, white, yellow, coral);
    background: radial-gradient(circle, white, yellow, coral);
}

 

 

<위치>

 

그라데이션이 시작하는 원의 중심을 지정할 수 있다. 위치 속성은 표준 구문과 이전 구문 사이에 큰 차이가 있기 때문에 주의해야 한다. 사용할 수 있는 위치 값은 키워드(left, center, right 중 하나, top, center, bottom 중 하나)나 백분율(ex. 20%)이다. 생략하면 가로 세로 모두 중안인 center로 인식한다.

 

• 표준 구문에서는  <모양>과 <크기> 속성 다음에 at 키워드와 함께 위치 값을 지정한다.
• 이전 구문에서는 at 키워드 없이 구문의 맨 앞부분에 위치 값을 지정한다.

 

예시)

/* 모양이 circle 일 경우 - 가로 10%, 세로 10% 인 지점이 원의 중심 */
.cirgrad3 {
    background: coral;
    background: -webkit-radial-gradient(10% 10%, circle, white, yellow, coral);
    background: -moz-radial-gradient(10% 10%, circle, white, yellow, coral);
    background: -o-radial-gradient(10% 10%, circle, white, yellow, coral);
    background: radial-gradient(circle at 10% 10%, white, yellow, coral);
}
/* 모양이 ellipse 일 경우 - 가로 30%, 세로 10% 인 지점이 원의 중심*/
.cirgrad4 {
    background: coral;
    background: -webkit-radial-gradient(30% 10%, white, yellow, coral);
    background: -moz-radial-gradient(30% 10%, white, yellow, coral);
    background: -o-radial-gradient(30% 10%, white, yellow, coral);
    background: radial-gradient(to 30% 10%, white, yellow, coral);
}

 

 

<크기>

 

그라데이션을 지정할 때 원의 크기도 지정할 수 있다. <모양> 속성과 'at <위치>' 사이에 크기를 나타내는 키워드 값을 사용할 수 있다. 키워드값은 다음과 같다.

• closest-side : 원의 경우, 원의 가장자리가 원의 중심에서 가장 가까운 요소(그라데이션이 적용된 요소)의 모서리와 만나게 그린다. 타원의 경우, 원의 중심에서 가장 가까운 요소의 수평축과 수직축과 만나게 그린다.
• closest-corner : 그러데이션 의 가장자리가 그러데이션 의 중심에서 가장 가까운 요소의 코너에 닿도록 한다. 그러데이션의 요소가 사각형이라면 각 4개의 꼭짓점들 중 그라데이션 중심에서 가장 가까운 꼭짓점에 닿을 때까지 그라데이션을 그린다.
• farthest-side : 원의 경우, 그라데이션 가장자리가 그라데이션 중심에서 가장 먼 모서리에 만나거나 타원의 경우, 그라데이션 갖아자리가 그라데이션 중심에서 가장 먼 모서리와 만나도록 한다.(모서리 = 한쪽 변)
• farthest-corner : 그라데이션 가장자리가 그라데이션 중심에서 가장 먼 코너에 닿도록 그린다. 기본값이다. 

 

예시)

/* 원 모양일 경우 */
.cirgrad3 {
    background: coral;
    background: -webkit-radial-gradient(10% 10%, circle closest-corner, white, yellow, coral);
    background: -moz-radial-gradient(10% 10%, circle closest-corner, white, yellow, coral);
    background: -o-radial-gradient(10% 10%, circle closest-corner, white, yellow, coral);
    background: radial-gradient(circle closest-corner at 10% 10%, white, yellow, coral);
}
/* 타원 모양일 경우 */
.cirgrad4 {
    background: coral;
    background: -webkit-radial-gradient(30% 10%, closest-side,white, yellow, coral);
    background: -moz-radial-gradient(30% 10%, closest-side,white, yellow, coral);
    background: -o-radial-gradient(30% 10%, closest-side, white, yellow, coral);
    background: radial-gradient(closest-side to 30% 10%, white, yellow, coral);
}

 

 

색상 중지 점(color-stop)

 

원형 그라데이션에서 색상이 바뀌는 부분을 색상 중지 점이라고 하는데 색상 뿐 아니라 색상 위치도 바꿀 수 있다.

 

예시)

.cirgrad4 {
    background: coral;
    background: -webkit-radial-gradient(30% 10%, farthest-side,white, yellow 70%, coral);
    background: -moz-radial-gradient(30% 10%, farthest-side,white, yellow 70%, coral);
    background: -o-radial-gradient(30% 10%, farthest-side, white, yellow 70%, coral);
    background: radial-gradient(farthest-side to 30% 10%, white, yellow 70%, coral);
}

 

 

 

 그라데이션 반복

선형 그라데이션과 원형 그라데이션은 패턴을 한 번 만든 후에 요소를 채울 만큼 반복해 표시할 수 있다.

• 선형 그라데이션 : repeating-linear-gradient 함수
• 원형 그라데이션 : repeating-radial-gradient 함수

 

예시)

/* 끝 색상이 20%를 차지하니 총 5개의 패턴이 나온다. */
.repgrad1 {
    background: coral;
    background: -webkit-repeating-linear-gradient(coral, white, red 20%);
    background: -moz-repeating-linear-gradient(coral, white, red 20%);
    background: -o-repeating-linear-gradient(coral, white, red 20%);
    background: repeating-linear-gradient(coral, white, red 20%);
}
.repgrad2 {
    background: coral;
    background: -webkit-repeating-radial-gradient(circle, white, #ccc 20%);
    background: -moz-repeating-radial-gradient(circle, white, #ccc 20%);
    background: -o-repeating-radial-gradient(circle, white, #ccc 20%);
    background: repeating-radial-gradient(circle, white, #ccc 20%);
}

 

 

예시)

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

.repgrad1 {
    background: coral;
    background: -webkit-repeating-linear-gradient(coral, coral 10%, white 10%, white 20%);
    background: -moz-repeating-linear-gradient(coral, coral 10%, white 10%, white 20%);
    background: -o-repeating-linear-gradient(coral, coral 10%, white 10%, white 20%);
    background: repeating-linear-gradient(coral, coral 10%, white 10%, white 20%);
}
.repgrad2 {
    background: coral;
    background: -webkit-repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%);
    background: -moz-repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%);
    background: -o-repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%);
    background: repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%);
}