CSS3 그라디언트는 두 개 이상의 지정된 색상 사이의 부드러운 전환을 표시 할 수 있습니다.
이전에는 이러한 효과에 대한 이미지를 사용했다. 그러나, CSS3 그라디언트를 사용하여 당신은 다운로드 시간과 대역폭 사용량을 줄일 수 있습니다. 확대되면 구배가 브라우저에 의해 생성되기 때문에 또한, 그라디언트 요소는 잘 보인다.
CSS3 그라데이션의 두 가지 유형을 정의합니다 :
- 선형 그라디언트가 (내려갑니다 / 상 / 좌 / 우 / 대각선)
- 방사형 그라디언트 (자신의 중심에 의해 정의)
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 다음 -webkit-, -moz- , 또는 -o- 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3 선형 그라디언트
적어도 두 가지 색상 정지를 정의해야 선형 그라데이션을 만들 수 있습니다. 색상 정지는 사이에 부드러운 전환을 렌더링 할 색상입니다. 또한 시작점과 그라데이션 효과와 함께 방향 (또는 각도)을 설정할 수있다.
통사론
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );선형 그라데이션 - 하단에 최고 (이 기본값)
다음의 예는 상위부터 선형 구배를 나타낸다. 그것은 노란색으로 전환, 빨간색 시작합니다
예
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} »그것을 자신을 시도 선형 그라데이션 - 왼쪽에서 오른쪽
다음의 예는 왼쪽에서 시작하는 선형 그라데이션을 보여줍니다. 그것은 노란색으로 전환, 빨간색 시작합니다
예
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} »그것을 자신을 시도 선형 그라데이션 - 대각선
사용자는 두 대각선 수평 및 수직 시작 위치를 지정하여 경사를 만들 수있다.
다음의 예는 왼쪽 상단에서 시작 (그리고 오른쪽 아래로 이동) 선형 그라데이션을 보여줍니다. 그것은 노란색으로 전환, 빨간색 시작합니다
예
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} »그것을 자신을 시도 각도를 사용하여
당신은 그라데이션의 방향을보다 효율적으로 관리를 원한다면, 당신은 (등, 왼쪽 하단 오른쪽에, 오른쪽, 맨 위로, 아래로) 대신 미리 정의 된 방향의 각도를 정의 할 수 있습니다.
통사론
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
각도는 수평 라인과 그라데이션 선 사이의 각도로 지정됩니다.
다음의 예는 선형 그라디언트에 각도를 사용하는 방법을 보여줍니다 :
예
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} »그것을 자신을 시도 여러 색상 중지를 사용하여
다음 예는 여러 색상 정지에 (위에서 아래로) 선형 그라데이션을 보여줍니다
예
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} »그것을 자신을 시도 다음은 무지개와 텍스트의 색상 (왼쪽에서 오른쪽으로) 선형 그라데이션을 만드는 방법을 보여줍니다 :
예
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} »그것을 자신을 시도 투명성을 사용하여
CSS3 구배는 페이딩 효과를 만들기 위해 사용될 수있는 투명성을 지원한다.
투명성을 추가하려면, 우리는 사용 rgba() 색상 정지를 정의하는 기능. 마지막 파라미터 rgba() 함수는 0에서 1까지의 값이 될 수 있고, 색상의 투명도를 정의한다 : 0 전체 투명성을 나타내고, 1은 풀 컬러 (투명도)을 나타낸다.
다음의 예는 왼쪽에서 시작하는 선형 그라데이션을 보여줍니다. 그것은 풀 컬러 빨간색으로 전환, 완전 투명 시작합니다
예
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} »그것을 자신을 시도 선형 구배를 반복
repeating-linear-gradient() 함수는 선형 그라디언트를 반복하는데 사용된다 :
예
반복되는 선형 그라데이션 :
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} »그것을 자신을 시도 CSS3 방사형 그라디언트
방사형 그라디언트는 그 중심에 의해 정의된다.
당신은 또한 두 개 이상의 색상 정지를 정의해야 방사형 그라디언트를 만들 수 있습니다.
통사론
background: radial-gradient( shape size at position, start-color, ..., last-color );기본적으로, 모양은 타원형, 크기가 먼 코너입니다, 그리고 위치는 센터입니다.
방사형 그라데이션 - 균등 색상 중지 (이 기본값)
다음의 예는 균등 색상 정지와 방사형 그라데이션을 보여줍니다
예
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} »그것을 자신을 시도 방사형 그라데이션 - 다르게 간격 색상 중지
다음의 예는 다르게 간격 색상 정지와 방사형 그라데이션을 보여줍니다
예
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} »그것을 자신을 시도 설정 모양
형상 매개 변수는 모양을 정의합니다. 이 값 원 또는 타원이 걸릴 수 있습니다. 기본값은 타원형이다.
다음은 원의 모양 방사형 그라디언트를 보여줍니다
예
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} »그것을 자신을 시도 크기가 다른 키워드를 사용하는
크기 파라미터는 그래디언트의 크기를 정의한다. 그것은 네 개의 값을 사용할 수 있습니다 :
- 가장 가까운 쪽
- 먼 쪽
- 가장 가까운 코너
- 먼 코너
예
다른 크기의 키워드를 방사형 그라데이션 :
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} »그것을 자신을 시도 방사형 구배 반복
repeating-radial-gradient() 함수는 방사상 기울기를 반복하는데 사용된다 :
예
반복되는 방사형 그라데이션 :
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} »그것을 자신을 시도 연습으로 자신을 테스트!
연습 1» 운동 2» 운동 3» 운동 4» 운동 5» 운동 6» 운동 7»