CSS 그라디언트
CSS 그라디언트를 사용하면 두 개 이상의 지정된 색상 간에 부드러운 전환을 표시할 수 있습니다.
CSS는 세 가지 유형의 그라디언트를 정의합니다.
- 선형 그라데이션(아래/위/왼쪽/오른쪽/대각선으로 이동)
- 방사형 그라디언트(중심에 의해 정의됨)
- 원추형 그라디언트(중심점을 중심으로 회전)
CSS 선형 그라디언트
선형 그래디언트를 생성하려면 최소한 두 개의 색상 정지점을 정의해야 합니다. 색상 정지점은 부드러운 전환을 렌더링하려는 색상입니다. 그라데이션 효과와 함께 시작점과 방향(또는 각도)을 설정할 수도 있습니다.
통사론
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
방향 - 위에서 아래로(기본값)
다음 예는 상단에서 시작하는 선형 그라데이션을 보여줍니다. 빨간색으로 시작하여 노란색으로 전환됩니다.
예시
#grad {
background-image: linear-gradient(red, yellow);
}
방향 - 왼쪽에서 오른쪽으로
다음 예는 왼쪽에서 시작하는 선형 기울기를 보여줍니다. 빨간색으로 시작하여 노란색으로 전환됩니다.
예시
#grad {
background-image: linear-gradient(to right, red , yellow);
}
방향 - 대각선
수평 및 수직 시작 위치를 모두 지정하여 대각선으로 그라데이션을 만들 수 있습니다.
다음 예는 왼쪽 상단에서 시작하여 오른쪽 하단으로 가는 선형 그래디언트를 보여줍니다. 빨간색으로 시작하여 노란색으로 전환됩니다.
예시
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
각도 사용
그라디언트 방향을 더 많이 제어하려면 미리 정의된 방향(아래쪽, 위쪽, 오른쪽, 왼쪽, 오른쪽 아래 등) 대신 각도를 정의할 수 있습니다. 0deg 값은 "to top"과 동일합니다. 90deg의 값은 "오른쪽으로"와 동일합니다. 180deg의 값은 "아래로"와 동일합니다.
통사론
background-image: linear-gradient(angle, color-stop1, color-stop2);
다음 예제에서는 선형 그래디언트에서 각도를 사용하는 방법을 보여줍니다.
예시
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
다중 색상 정지점 사용
다음 예는 여러 색상 정지점이 있는 선형 그라디언트(위에서 아래로)를 보여줍니다.
예시
#grad {
background-image: linear-gradient(red, yellow, green);
}
다음 예제에서는 무지개 색상과 일부 텍스트를 사용하여 선형 그래디언트(왼쪽에서 오른쪽으로)를 만드는 방법을 보여줍니다.
예시
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
투명도 사용
CSS 그라디언트는 페이딩 효과를 만드는 데 사용할 수 있는 투명도도 지원합니다.
투명도를 추가하기 위해 rgba() 함수를 사용하여 색상 정지점을 정의합니다. rgba() 함수의 마지막 매개변수는 0에서 1 사이의 값이 될 수 있으며 색상의 투명도를 정의합니다. 0은 전체 투명도를 나타내고 1은 전체 색상(투명도 없음)을 나타냅니다.
다음 예는 왼쪽에서 시작하는 선형 기울기를 보여줍니다. 완전히 투명하게 시작하여 전체 색상 빨간색으로 전환됩니다.
예시
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
선형 그라데이션 반복
repeat-linear-gradient() 함수는 선형 그래디언트를 반복하는 데 사용됩니다.
예시
반복되는 선형 그라데이션:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}