CSS3 그라디언트

CSS3 그래디언트를 사용하면 둘 이상의 지정된 색상 간 부드러운 전환을 표시 할 수 있습니다.

이전에는 이러한 효과를 위해 이미지를 사용해야했습니다. 그러나 CSS3 그래디언트를 사용하면 다운로드 시간과 대역폭 사용을 줄일 수 있습니다. 그라디언트가 브라우저에서 생성되기 때문에 확대 / 축소하면 그라디언트가있는 요소가 더 잘 보입니다.

CSS3는 두 가지 유형의 그라디언트를 정의합니다.

1. 선형 그라디언트 (아래 / 위 / 왼쪽 / 오른쪽 / 대각선으로 이동)

2. 방사형 그라디언트 (중심에 정의 됨)

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 */

}