CSS 구배 : 구문 충돌 과정

CSS 그라디언트 : 충돌 구배 코스

과거에는 대부분의 웹 사이트가 이미지를 사용하여 아름다운 UI를 만들었습니다. 다양한 CSS 속성 덕분 에이 추세가 변경되었습니다. 이 튜토리얼은 CSS 기울기를 배우는 데 도움이됩니다. 그라디언트를 사용하여 배경의 이미지뿐만 아니라 다양한 UI 요소를 대체 할 수 있습니다. 약간의 연습으로 이미지를 사용하지 않고 복잡한 패턴을 만들 수 있습니다.

CSS 그라디언트는 브라우저에서 잘 지원되므로 둘 이상의 지정된 색상 사이에서 부드러운 시각적 전환을 만들 수 있습니다. 그라디언트는 크기, 각도, 그라디언트의 색상 정지 위치 등과 같은 많은 설정을 제어 할 수 있습니다. 이 기사에서는 선형, 방사형 및 최신 반복 그라디언트를 소개합니다.

키 포인트

CSS 그라디언트는 브라우저에서 널리 지원되므로 둘 이상의 지정된 색상 사이의 원활한 전환과 크기, 각도 및 색상 정지 위치와 같은 많은 설정을 제어 할 수 있습니다.

선형 그라디언트는 가장 일반적으로 사용되는 그라디언트로, 직선을 따라 한 색에서 다른 색상으로 전환됩니다. 이것은 방향 또는 각도를 지정하여 제어 할 수 있습니다.

방사형 구배는 단일 지점에서 시작하여 바깥쪽으로 확장되는 원형 또는 타원형 패턴으로 색상을 전환합니다. 방사형 구배의 형상, 크기 및 위치를 제어하기 위해 다양한 파라미터를 사용 할 수 있습니다.

반복 그라디언트는 다른 그라디언트와 유사하지만 색상 정지 위치를 무한히 반복하여 복잡한 패턴과 배경을 생성 할 수 있습니다. 비 반복 기울기와 동일한 매개 변수를 취합니다.

선형 그라디언트

선형 구배는 가장 일반적으로 사용되는 그라디언트입니다. 이는 괄호 안의 값은 값의 유형을 나타냅니다.
• 방향을 지정하지 않으면 그라디언트는 첫 번째 색상의 전체 강도로 상단에서 시작한 다음 하단에 도달하면 마지막 색상으로 부드럽게 전환됩니다.
더 많은 제어를 위해 구배 방향을 지정할 수 있습니다. 간단한 용어 (예 : 왼쪽, 오른쪽)를 사용하여 구현하거나 각도를 지정할 수 있습니다. 다음 코드 스 니펫은 왼쪽에서 오른쪽으로 배경을 만듭니다.
• 코드 펜의 예를보기 :
왼쪽에서 오른쪽 선형 그라디언트 이전 브라우저는 약간 다른 구문을 지원하며 브라우저 별 접두사가 필요합니다. 이전 브라우저에서는 엔드 포인트 대신 시작점을 지정합니다. 이전 브라우저의 CSS3 그라디언트 코드는 다음과 같습니다.
• 선형 그라디언트의 각도를 지정하십시오 특정 각도로 그라디언트를 생성 해야하는 경우 각도를 직접 지정할 수 있습니다. 다음 코드는 60 도의 그라디언트를 만듭니다.
라인을 하단에서 상단으로 0으로 처리하고 선이 시계 방향으로 이동하면 각도가 증가합니다. 예를 들면 :
이것은 하단에 빨간색이 있고 상단에는 파란색으로 구배를 만듭니다. 다음 코드는 왼쪽에 빨간색과 오른쪽의 파란색으로 수평 구배를 만듭니다.

<code>.example {
  background: linear-gradient(
    [方向], [第一种颜色], [第二种颜色], [更多颜色 ...]
  );
}</code>

코드 펜에서 예제를보기 :

각도가 다른 선형 그라디언트 선형 그라디언트에서 색상 정지 위치를 지정하십시오 색상을 고르지 않게 변경하려면 색상 정지 위치를 직접 지정할 수 있습니다. 색상 정지 위치는 백분율 값 또는 절대 길이로 지정할 수 있습니다. 첫 번째 및 마지막 색상에 대한 정지 위치를 지정할 필요가 없습니다. 주어진 색상은 지정된 색상 위치에서 전체 강도를 갖습니다. 예는 다음과 같습니다. 정지 위치가 지정되지 않으면 색상이 균등하게 간격이됩니다.

코드 펜에서 예제보기 :

색상 정지가있는 선형 그라디언트 방사형 그라디언트

방사형 그라디언트는 덜 일반적이며 복잡합니다. 이것은 방사형 구배의 구문입니다 :

아무것도 지정되지 않으면 기본 모양은 타원이고 크기는 가장 먼 각도이며 위치는 중심입니다. 색상 정지 위치는 선형 구배와 정확히 동일한 방식으로 지정됩니다. 다음 코드 스 니펫은 타원 방사형 구배를 그립니다.

코드 펜의 예를 봅니다 : 방사형 그라디언트 예제

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

방사형 구배의 크기를 변경하십시오 방사형 그라디언트의 크기는 가장 가까운 가장 가까운 곳, 가장 가까운 곳, 가장 가까운 코너 및 가장 먼 코너의 네 가지 값으로 결정됩니다. 모양 값과 함께 사용하면 이러한 키워드는 모양을 정의합니다. 그라디언트의 형상은 그라디언트가 그라디언트가 적용되는 요소의 경계를 넘어서 무한히 연장 될 때 작동합니다.

이것을 더 명확하게하기위한 예를 살펴 보겠습니다. 우리는 네 가지 요소에 4 개의 그라디언트를 생성 할 것입니다 :

다음 CSS에서는 네 가지 키워드 값을 사용했습니다.

Codepen의 예를보기 : 크기 키워드 값이 다른 방사형 그라디언트

데모 중 각 구배 사이에는 미묘하지만 명백한 차이가 있습니다. 방사형 그라디언트에서 색상 정지 위치를 정의하십시오 방사형 구배의 색상 정지 위치는 선형 구배와 유사합니다. 또한 원의 중심 위치를 백분율로 지정합니다. 원하는 경우 픽셀 값을 사용할 수도 있습니다. 다음은 이것을 보여주기위한 코드 스 니펫입니다

코드 펜의 예를보기 : 색상 정지가있는 방사형 그라디언트

반복 그라디언트 반복 그라디언트는 다른 그라디언트와 유사하며 동일한 매개 변수를 취합니다. 유일한 차이점은 색상 정지 위치를 무한히 반복한다는 것입니다. 기본 구배 길이의 배수에 따라 색상의 위치가 오프셋됩니다. 보시다시피,이 반복을 통해 복잡한 패턴과 배경을 만들 수 있습니다.

주목해야 할 사항은 동일한 요소에서 여러 반복 그라디언트를 사용하면 첫 번째 그라디언트가 상단에 표시된다는 것입니다. 물론 이것은 첫 번째 그라디언트의 각 색상이 100% 불투명 한 경우 (즉, 투명성 없음) 스택의 다른 그라디언트가 보이지 않음을 의미합니다.

리니어 그라디언트를 반복하십시오 기본 반복 선형 그라디언트를 만들려면 다음을 수행 할 수 있습니다.

코드 펜에서 예제를 봅니다 :

반복 선형 그라디언트 색상을 갑자기 변경하려면 두 가지 색상을 지정해야합니다. 미묘한 패턴을 만들려면 여러 배경 이미지를 추가하는 것과 마찬가지로 다른 그라디언트를 추가합니다.

이번에는 그라디언트를 흰색 대신 투명하게 설정했습니다. 다른 색상 중지 위치와 각도를 시도하는 것이 좋습니다.

Codepen에서 예제보기 :

<code>.example {
  background: linear-gradient(
    [方向], [第一种颜色], [第二种颜色], [更多颜色 ...]
  );
}</code>

다중 그라데이션으로 선형 구배 반복

방사형 그라디언트 를 반복하십시오 반복 방사형 구배는 표준 방사형 구배와 유사합니다. 간단한 반복 방사형 구배를 만드는 코드는 다음과 같습니다. 코드 펜에서 예제를 봅니다 :

방사형 그라디언트

당신은 또한 다음과 같은 다중 반복 방사형 그라디언트를 레이어 할 수 있습니다 :

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

Codepen에서 예제보기 :

다중 그라데이션으로 방사형 구배 반복

결론 이 튜토리얼에서는 CSS 그라디언트의 모든 측면을 다루려고 노력합니다. 간단한 패턴이 필요한 많은 경우 그라디언트는 이미지를 사용해야 할 필요가 없습니다. 물론, 그라디언트는 이미지에 대한 추가 HTTP 요청을 피하지만 여전히 성능 문제를 일으킬 수 있으며주의해서 사용해야합니다. CSS 그라디언트에 대한 자주 묻는 질문

CSS의 선형 구배와 방사형 구배의 차이점은 무엇입니까?

CSS에서 그라디언트는 둘 이상의 지정된 색상 사이에서 부드러운 전환을 생성하는 데 사용됩니다. 선형 구배는 한 지점에서 다른 지점에서 끝까지 시작하여 선을 따라 색상을 전환합니다. 그라디언트의 방향은 각도 (예 : "오른쪽"또는 "45deg") 또는 시작점 (예 : "오른쪽 상단")을 선언하여 정의 할 수 있습니다.

반면에, 방사형 구배는 원형 또는 타원형 패턴으로 색상으로 전이됩니다. 그들은 한 지점에서 시작하여 바깥쪽으로 확장하여 원형 또는 타원형 모양을 만듭니다. 방사형 구배의 형상, 크기 및 위치를 제어하기 위해 다양한 파라미터를 사용 할 수 있습니다.

CSS에서 반복적 인 그라디언트를 만드는 방법은 무엇입니까?

CSS는 반복적 인 선형 그라디언트 () 및 반복-방사선 그레이드 () 함수를 사용하여 반복적 인 그라디언트를 생성하는 방법을 제공합니다. 이러한 기능은 비 반복적 인 상대와 유사하게 작동하지만 지정된 구배 패턴을 무기한으로 반복하여 원활한 반복 패턴을 만듭니다. 이러한 함수의 구문은 Linear-Gradient () 및 Radial-Gradient ()의 구문과 유사하지만 반복 패턴을 만드는 방식으로 색상 정지 위치를 지정해야합니다.

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

CSS 기울기의 색상 정지 위치는 무엇입니까?

색상 정지 위치는 부드러운 전환을 렌더링하려는 색상이며 각 색상이 그라디언트에 나타나야합니다. CSS 기울기에서 원하는만큼 색상 정지를 지정할 수 있습니다. 각 색상 정지 위치는 색상 값과 선택적 길이 또는 백분율로 정의됩니다. 길이 또는 백분율을 지정하지 않으면 색상 정지 위치가 균등하게 간격이됩니다.

선형 구배 방향을 제어하는 ​​방법은 무엇입니까?

선형 그라데이션 () 함수의 첫 번째 매개 변수는 선형 구배의 방향을 제어하는 ​​데 사용될 수 있습니다. 이 매개 변수는 각도 (예 : "45deg") 또는 "오른쪽"또는 "왼쪽 상단"과 같은 시작점을 지정하는 키워드 일 수 있습니다. 방향을 지정하지 않으면 그라디언트는 위에서 아래로 이동합니다.

방사형 그라디언트의 모양과 크기를 제어하는 ​​방법은 무엇입니까?

방사형 그라디언트 () 함수의 첫 번째 파라미터는 방사형 구배의 모양과 크기를 제어하는 ​​데 사용될 수 있습니다. 이 매개 변수는 모양 키워드 ( "Circle"또는 "Ellipse")가 될 수 있으며 선택적 크기 키워드 ( "가장 가까운", "가장 먼 쪽", "가장 가까운 코너", "가장 먼 곳") 및 /가 이어집니다. 또는 위치. 모양을 지정하지 않으면 그라디언트는 타원형이됩니다. 크기를 지정하지 않으면 그라디언트가 가장 가까운면으로 확장됩니다.

CSS 구배에서 투명성을 사용할 수 있습니까?

예, RGBA 색상 값을 사용하여 CSS 그라디언트에서 투명성을 사용할 수 있습니다. RGBA 색상 값은 RGBA (빨간색, 녹색, 파란색, 알파)로 지정됩니다. 알파 매개 변수는 0.0 (완전히 투명)과 1.0 (완전히 불투명) 사이의 숫자입니다.

단단한 색상 변동으로 그라디언트를 만드는 방법은 무엇입니까?

단단한 색상 변경으로 구배를 만들려면 동일한 위치로 여러 색상 정지 위치를 사용할 수 있습니다. 예를 들어, "파란색, 녹색 50%, 녹색 50%, 노란색"은 갑자기 파란색에서 녹색으로, 가운데에서 녹색에서 녹색에서 노란색으로 갑자기 변하는 그라디언트를 생성합니다.

그라디언트를 배경 이미지로 사용할 수 있습니까?

예, CSS에서 그라디언트를 배경 이미지로 사용할 수 있습니다. 그라디언트 함수는 CSS 이미지 데이터 유형을 반환하고 이미지를 사용할 수있는 곳 어디에서나 사용할 수 있습니다. 예를 들어, 그라디언트를 요소의 배경 이미지 또는 여러 배경의 일부로 사용할 수 있습니다.

CSS의 그라디언트를 애니메이션 할 수 있습니까?

CSS는 직접 애니메이션 그라디언트를 지원하지 않습니다. 그러나 반복적 인 그라디언트가있는 요소의 애니메이션 배경 위치 또는 배경 크기의 요소 크기 또는 애니메이션 내용의 마스크로 그라디언트를 사용하여 유사한 효과를 얻을 수 있습니다.

모든 브라우저가 CSS 기울기를 지원합니까?

CSS 그라디언트는 Chrome, Firefox, Safari, Edge 및 Internet Explorer 10 이상을 포함한 모든 최신 브라우저에서 널리 지원됩니다. 그러나 그라디언트를 지원하지 않는 이전 브라우저의 경우 대체 색상을 제공해야합니다.

위 내용은 CSS 구배 : 구문 충돌 과정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!