원형 차트 등을위한 CSS 원뿔 구배를 만드는 방법

키 테이크 아웃

Lea Verou가 옹호하는 Conic Gradients는 브라우저 지원을 얻기 시작했으며 파이 차트 및 컬러 휠과 같은 효과를 만드는 데 사용될 수 있습니다. 그것들은 방사형 라인이 아닌 원의 둘레를 따라 배치된다는 색상 정지의 방사형 구배와 다릅니다.

. 원뿔 그라디언트에 대한 구문은 시작 각도 및 중앙 위치를 사양 할 수 있습니다. 생략되면이 기본값은 각각 0과 중앙으로입니다. 첫 번째 및 마지막 색상의 컬러 스톱 각도는 지정되지 않은 경우 0DEG 및 360DEG로 가정됩니다. Conic Gradients는 다양한 색상에 대한 단단한 컬러 스톱 값을 제공하여 원형 차트를 만드는 데 사용될 수 있습니다. 그라디언트의 각 색상은 시작 및 끝 각도를 제공하여 별개의 섹터를 형성 할 수 있습니다. 이러한 컬러 스톱 값을 지정하는 두 가지 방법이 있습니다. 각 색상의 시작 각도를 0으로 설정하거나 다음 색상의 시작 각도를 이전 색상의 끝 각도와 동일하게 설정합니다. 반복 된 원뿔 구배는 일반적인 원뿔 구배와 동일한 값을 받아들이지만 전체 360도가 커버 될 때까지 반복합니다. 이것은 이전에 이미지 사용이 필요한 일반적인 이미지 패턴을 만드는 데 사용될 수 있습니다.

점점 더 많은 웹 사이트가 어떤 방식 으로든 그라디언트를 사용합니다. 일부 웹 사이트는 내비게이션 구성 요소에 사용하는 반면 다른 웹 사이트는 버튼과 같은 요소 또는 이미지와 함께 멋진 효과를 만듭니다. 모든 브라우저는 기본 CSS 선형 및 방사형 구배를 오랫동안 지원했습니다. CSS 그라디언트 : Sitepoint의 구문 충돌 코스 기사는 선형 및 방사형 그라디언트를 생성하는 데 필요한 구문을 빠르게 요약하고 반복적 인 그라디언트를 사용하여 몇 가지 기본 패턴을 만드는 방법을 제공합니다. 가능할 때마다 이미지를 사용하지 마십시오.
• 선형 및 방사형 구배 후, 브라우저는 이제 Lea Verou가 처음으로 우승 한 원뿔 구배를 지원하기 시작하고 있습니다.
이 기사에서는 간단한 원뿔 구배 및 반복적 인 구배에 대한 구문, 용도 및 브라우저 지원에 대해 배우게됩니다. 원뿔 그라디언트 란 무엇입니까?
• 원뿔형 및 방사형 구배는 둘 다 지정된 또는 기본 점에서 원의 중심에서 시작한다는 의미에서 유사합니다. 둘 사이의 차이점은 방사형 구배의 경우 색상 스톱이 방사형 라인을 따라 배치되는 반면, 원뿔 구배의 경우 색상 정지가 원의 둘레를 따라 배치된다는 것입니다.
. 원뿔 구배에 대한 컬러 스톱의 위치는 백분율 측면에서 또는 학위 측면에서 지정할 수 있습니다. 0% 또는 0deg의 값은 원뿔 구배의 상단을 나타냅니다. 시계 방향으로 움직일 때 값은 점차적으로 증가합니다. 360deg의 값은 0DEG와 같습니다. 컬러 스톱 값이 100% 또는 360deg보다 큰 색상은 원뿔 구배에 그려지지 않지만 여전히 색상 분포에 영향을 미칩니다. 다음 이미지는 노란색으로 시작하여 주황색으로 끝나는 원뿔 구배를 보여줍니다.

0deg에서 노란색에서 360deg에서 오렌지를 분리하는 날카로운 전환을 눈치 채기가 어렵습니다. 원뿔 구배는 원뿔 구배의 시작 및 종료 색상이 매우 다를 때마다 항상 이러한 전환을 생성한다는 것을 기억하십시오. 그것을 피하는 한 가지 방법은 시작과 끝 색상을 동일한 값으로 설정하는 것입니다.

원뿔 그라디언트에 대한 구문 Conic Gradients를 사용하면 시작 각도와 중심 위치를 지정할 수 있습니다. 이러한 값이 생략되면 각도 기본값은 0으로, 위치는 기본값으로 중앙으로 표시됩니다. Conic Gradients의 구문은 다음과 같습니다 첫 번째 및 마지막 색상의 컬러 스톱 각도는 지정되지 않은 경우 각각 0DEG 및 360DEG로 가정합니다. 이전 섹션의 노란색 원뿔 구배는 다음 버전 중 하나를 사용하여 만들 수 있습니다. 도를 사용하는 대신 백분율을 사용할 수도 있습니다. 앞에서 언급했듯이 100%의 값은 360deg와 같습니다. 따라서 50%의 값은 180deg와 같습니다. 특정 색상으로 커버하려는 원의 일부를 정확히 알고 있다면 백분율을 사용하는 것이 더 쉬울 수 있습니다. 유사하게, 원뿔 구배의 중심 위치는 또한 백분율로 지정 될 수있다. 위의 Conic Gradient 값은 다음과 같은 결과를 생성합니다.

Codepen에서 sitepoint (@sitepoint)로 원뿔 구배를 만드는 펜을 참조하십시오. 모든 브라우저가 현재 원뿔 구배를 지원하는 것은 아니므로 최종 결과가 어떻게 보일지 보여주기 위해 각 예제에 참조 이미지를 포함 할 것입니다. 원뿔 그라디언트의 사용 원뿔 구배를 사용하여 다양한 종류의 컬러 휠을 만들 수 있습니다. 예를 들어, 다음 데모는 원뿔 구배에서 무지개 색상을 사용하여 무지개 휠을 만듭니다.

갑작스런 전환을 피하기 위해 원뿔 구배의 시작과 끝 색상을 바이올렛으로 설정 한 방법에 주목하십시오. Codepen에서 Sitepoint (@SitePoint)에 의한 원뿔 구배 만들기 - 무지개 휠을 만드는 펜을 참조하십시오. PIE 차트에 CSS 원뿔 그라디언트를 사용하는 원뿔 구배의 또 다른 이점은 파이 차트를 쉽게 만들 수 있다는 것입니다. 파이 차트를 만드는 과정은 실제로 매우 간단합니다. 당신이해야 할 일은 다른 색상에 대한 단단한 컬러 스톱 값을 제공하기 만하면됩니다. 그라디언트의 각 색상에는 시작 및 종료 각도가 제공 될 수 있습니다. 다음 색상의 시작 각도의 값이 현재 색상의 엔드 각도 값보다 작거나 동일하면 매우 날카 롭고 순간적으로 색상 변화로 표시되어 별개의 섹터가 형성됩니다.

. 이러한 컬러 스톱 값을 지정하는 두 가지 방법이 있습니다. 첫 번째는 항상 각 색상의 시작 각도를 0으로 설정하는 것입니다.

두 번째 방법은 다음 색상의 시작 각도를 이전 색상의 끝 각도와 동일하게 설정하는 것입니다. 당신이 마침내 결정하기로 결정한 것은 선호의 문제입니다.

다음 코드 스 니펫은 비교를 위해 나란히이 두 가지 방법의 원뿔 구배 값을 보여줍니다.

당신은 기본적으로 기본적으로 각각 0%와 100%로 설정되므로 마지막 색상의 첫 번째 색상 및 끝 각도를 생략 할 수 있습니다. CONIC GRADIENT 만들기 - CodePen에서 SitePoint (@SitePoint)의 원형 차트를 만드는 펜을 참조하십시오. CSS 원뿔 구배를 사용하여 도넛 차트를 생성하기 위해 도넛 차트 생성은 단단한 색상 스톱으로 요소에 추가 방사형 구배를 적용하는 것입니다. 방사형 구배의 내부 색상은 흰색으로 설정 될 수 있고 외부 부분은 투명하게 만들 수 있습니다.

CONIC GRADIENT 만들기 - CodePen에서 SitePoint (@SitePoint)의 Donut 차트를 만드는 펜을 참조하십시오. 반복 원뿔 그라디언트 반복적 인 원뿔 구배는 정기적 인 구배와 동일한 값을 모두 받아들입니다. 유일한 차이점은 이번에는 전체 360도가 커버 될 때까지 계속 반복한다는 것입니다. 이 반복을 사용하여 이전에 이미지 사용이 필요한 일반적인 이미지 패턴을 만들 수 있습니다. 는 파이 차트를 쉽게 수정하여 스타 버스트와 같은 배경을 만들 수 있습니다. 당신이해야 할 일은 반복적 인 그레이드를 사용하고 각 색상 세그먼트의 너비를 적절한 양으로 줄입니다.

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</span>

마찬가지로, 각 섹터의 너비를 25%로 설정하고 배경 크기를 설정하여 쉽게 바둑판 패턴을 만들 수 있습니다. 다음 이미지는 직사각형 또는 정사각형 영역에 4 개의 90도 섹터로 원뿔 구배를 확장하는 방법을 보여줍니다.

여기에 체커 보드 패턴을 만들기위한 CSS가 있습니다 :

CODEPEN에서 SitePoint (@SitePoint)에 의한 Conic Gradient를 반복하는 펜을 참조하십시오. 당신은 다른 섹터의 크기를 변경하고 그라디언트의 각도를 변경하여 더 많은 패턴을 만들 수 있습니다. 브라우저 지원 및 폴리 플릴 이 기사를 작성할 당시 는 Conic Gradients가 Chrome 59 및 Opera 46의 "실험 웹 플랫폼 기능"플래그 뒤에 지원됩니다. 다른 브라우저는 기본적으로 또는 일부 플래그 뒤에이 새로운 표준을 지원하지 않습니다. 이것은 브라우저 지원이 충분하기 전에 조금 기다려야한다는 것을 의미합니다. 그러나 Lea ​​Verou가 만든 우수한 CSS Conic-Gradient () Polyfill의 도움으로 오늘 CSS Conic Gradients를 사용할 수 있습니다. CSS 파일에 원뿔 구배 폴백을 자동으로 추가하는 PostCSS Conic Gradient 플러그인도 있습니다. 최종 생각 이 자습서는 원뿔 구배를 사용하여 파이 및 도넛 차트를 만드는 방법을 보여주었습니다. 그 후, 당신은 원뿔 구배를 반복하는 데 도움이되는 CSS 만 사용하여 다른 배경 패턴을 만드는 방법을 배웠습니다. 브라우저 지원이 충분하면 더 이상 이러한 작업을 수행하기 위해 대형 라이브러리 나 이미지에 의존 할 필요가 없습니다.

. 원뿔 그라디언트에 대한 자세한 내용은 이러한 리소스를 놓치지 마십시오.

CSSConf EU 2015에 대한 Lea Verou의 대화 background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg); background: conic-gradient(at center, yellow 0deg, orange 360deg); background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg); background: conic-gradient(from 0deg, yellow 0deg, orange 360deg); background: conic-gradient(yellow 0deg, orange 360deg); background: conic-gradient(yellow, orange); CSS 이미지 값 및 대체 된 컨텐츠 모듈 레벨 4 의 원뿔 구배 섹션 2011 년으로 거슬러 올라가는 Lea Verou의 초안 초안 사양.

웹에서 원뿔 구배에 대한 고유 한 용도를 제안 할 수 있습니까? 의견에 알려주십시오.

CSS 콘 그라디언트 및 파이 차트에 대한 자주 묻는 질문 (FAQ) CSS Conic Gradients에서 컬러 스톱 값의 중요성은 무엇입니까?

CSS Conic Gradients의 컬러 스톱 값은 그라디언트의 각 색상의 위치를 ​​결정하므로 중요합니다. 백분율 또는 각도로 표현됩니다. 예를 들어, 25% 또는 90deg의 컬러 스톱 값은 색상이 원 주위의 4 분의 1 또는 90도에서 끝나는 것을 의미합니다. 이 값을 조작하면 고유 한 그라디언트 효과를 만들 수 있습니다.

원뿔 구배에서 색상간에 매끄러운 전환을 만들 수 있습니까?

원뿔 기울기에서 색상간에 매끄러운 전환을 만들려면 여러 컬러 스톱 값을 사용할 수 있습니다. 컬러 스톱을 함께 가깝게 배치하면 색상 사이의 부드럽고 점진적인 전환을 만들 수 있습니다. 색상 스톱이 가까이있을수록 전환이 부드럽게됩니다.

CSS 원뿔 구배를 사용하여 파이 차트를 만들 수 있습니까? 어떻게?

예, CSS 원뿔 구배를 사용하여 파이 차트를 만들 수 있습니다. 다른 색상 스톱 값을 설정하면 파이 차트와 유사한 다른 색상의 섹션을 만들 수 있습니다. 그런 다음이 섹션을 사용하여 다른 데이터 포인트를 나타낼 수 있습니다.

왜 일부 브라우저에서 내 원뿔 그라디언트가 올바르게 표시되지 않습니까?

모든 브라우저가 CSS Conic Gradients를 지원하는 것은 아닙니다. 예를 들어, Internet Explorer와 일부 버전의 Microsoft Edge는이를 지원하지 않습니다. 모든 브라우저에서 그라디언트가 올바르게 표시되도록하려면 폴백 배경 색상 또는 폴리 필드를 사용하는 것을 고려하십시오.

CSS Conic Gradients로 방사형 그라디언트를 어떻게 만들 수 있습니까?

CSS Conic Gradients는 A를 만듭니다. 중심 지점 주위에 방사되는 그라디언트, CSS 방사형 구배는 중심 지점에서 방출되는 그라디언트를 만듭니다. 방사형 구배를 만들려면 conic-gradient () 함수 대신 Radial-Gradient () 함수를 사용합니다.

CSS 변수를 원뿔 그라디언트와 함께 사용할 수 있습니까?

예, 여러분, 당신은 당신입니다. 원뿔 구배와 함께 CSS 변수를 사용할 수 있습니다. 이를 통해보다 역동적이고 유연한 스타일을 만들 수 있습니다. 특정 값으로 CSS 변수를 정의한 다음 원뿔 구배에서 해당 변수를 사용할 수 있습니다.

CSS Conic Gradient를 어떻게 애정 할 수 있습니까?

사용하여 CSS Conic Gradient를 사용하여 사용하여 CSS Conic Gradient를 애니메이션 할 수 있습니다. CSS 애니메이션 또는 전환. 예를 들어, 그라디언트의 회전에 애니메이션을 할 수 있거나 컬러 스톱 값을 애니메이션하여 시간이 지남에 따라 변경되는 그라디언트를 생성 할 수 있습니다.

CSS Conic Gradient에서 투명한 색상을 사용할 수 있습니까?

예, CSS 원뿔 구배에서 투명한 색상을 사용할 수 있습니다. 이것은 투명성으로 사라지는 그라디언트와 같은 흥미로운 시각적 효과를 만들 수 있습니다.

반복적 인 구배를 어떻게 생성 할 수 있습니까?

반복적 인 원뿔 구배를 만들려면 반복을 사용할 수 있습니다. conic-gradient () 함수. 이를 통해 원 주위를 반복하는 그라디언트 패턴을 만들 수 있습니다.

다른 CSS 속성과 함께 CSS 원뿔 구배를 사용할 수 있습니까?

예, 다른 CSS 속성과 함께 CSS 콘 그라디언트를 사용할 수 있습니다. 예를 들어, 원뿔 구배를 텍스트 요소의 배경으로 사용한 다음 다른 CSS 속성을 해당 텍스트에 색상, 글꼴 크기 및 텍스트 쉐이드와 같은 텍스트에 적용 할 수 있습니다.

위 내용은 원형 차트 등을위한 CSS 원뿔 구배를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!