CSS3 그라디언트 사용 방법 - 인형

CSS3 그래디언트 (두 개 이상의 색상을 혼합 한 것)는 멋진 배경이 될 수 있습니다. 이전에는 개발자가 이미지 편집기에서 얇은 그라데이션 스트립을 만든 다음 repeat-x 또는 repeat-y 규칙을 사용하여 작은 이미지를 페이지 전체에 복제함으로써 그라데이션을 만들었습니다. 이것은 훌륭한 기법 이었지만, 매우 유연하지는 않았으며 상대적으로 단순한 선형 그래디언트 만 가능했습니다.

CSS3는 선형과 방사형이라는 두 가지 주요 유형의 그라디언트를 지원합니다. 선형 그래디언트는 직선을 따라 색상을 변경하고 방사형 그래디언트는 중심점에서 바깥쪽으로 방사합니다. 그라디언트 메커니즘은 표준화되고 채택되는 CSS의 더 느린 부분 중 하나 였으므로 여전히 변화하고 있지만 브라우저가 마침내 표준을 설정 한 것처럼 보입니다. 불행하게도 당분간 공급 업체별 접두사가 필요합니다.

가장 단순한 그라디언트가 상자 1에 나와 있습니다. 왼쪽에서 오른쪽으로, 빨간색에서 시작하여 흰색으로 끝납니다.

# box1 {배경 이미지: 선형 그래디언트 (왼쪽, 빨간색, 흰색); 배경 이미지: -moz-linear-gradient (왼쪽, 빨간색, 흰색); background-image: -webkit-linear-gradient (left, red, white);}

간단한 선형 그래디언트를 만드는 방법은 다음과 같습니다.

선택기를 정의하십시오.

그라데이션이 CSS에 정의되어 있으므로 그라디언트를 추가 할 요소를 결정하기 위해 표준 CSS 선택기를 사용해야합니다.

배경 이미지 규칙을 사용합니다.

1. 그라디언트는 특별한 형태의 이미지입니다. 배경 이미지 규칙을 사용하여 페이지의 전체 본문을 포함하여 모든 요소의 배경에 그라디언트를 적용 할 수 있습니다.

   선형 그래디언트 함수를 호출하십시오.

2. 몇몇 CSS 요소는 기술적으로 기능이기 때문에 괄호가 필요합니다. 이 구분은 현재 중요하지 않지만이 값 유형을 사용할 때 괄호를 통합해야합니다. 선형 그래디언트 기법은 함수입니다.

   그래디언트가 흐르는 방향을 결정합니다.

3. 요소 내부에서 원하는 방향으로 그라데이션 흐름을 만들 수 있습니다. 왼쪽을 표시하면 요소가 왼쪽에서 오른쪽으로 흐릅니다. 상단 왼쪽에서 하단 오른쪽으로 가기 위해 위쪽에서 아래쪽으로, 또는 왼쪽에서 위로 이동하는 데 사용할 수 있습니다. 위쪽, 왼쪽, 아래쪽, 오른쪽의 조합을 사용하십시오. 다음 예에서와 같이 각도를 각도로 지정할 수도 있습니다.

   시작 색상을 지정하십시오.

4. 표준 색상 도구 (색상 이름, 16 진 색상, rgb () / rgba () 또는 hsl ())를 사용하여 시작 색상을 결정합니다.

   결말 색을 표시하십시오.

5. 표시된 마지막 색은 그라데이션의 끝 색입니다. 그라디언트는 처음부터 끝까지 균일하게 흐릅니다.

   브라우저 확장 프로그램을 사용하여 반복하십시오.

6. 특정 브라우저에 변형을 추가해야합니다. 각 주요 공급 업체에 대한 새로운 버전의 배경 이미지 규칙을 만들어야합니다.

   더 재미있는 그라디언트 작성법

7. 상자 2를 보면 여러 색상과 재미있는 각도를 보여주는보다 복잡한 그라디언트를 볼 수 있습니다.

   # box2 {배경 이미지: 선형 그래디언트 (75도, 빨간색, 흰색 33 %, 흰색 66 %, 파란색); 배경 이미지: -moz-linear-gradient (75ºg, 빨간색, 흰색 33 %, 흰색 66 %, 파란색); background-image: -webkit-linear-gradient (75deg, red, white 33 %, white 66 %, blue);}

그라디언트에 더 많은 pizazz를 추가하는 방법은 다음과 같습니다.

방향을 위해 각도를 사용하십시오.

표준 상단 / 왼쪽 키워드로 그라디언트 방향을 지정하는 대신 시작 각도를 지정할 수 있습니다. 각도는 수학적으로도 단위로 측정됩니다. 0은 오른쪽에서오고 90은 위에서 아래로옵니다. deg로 각도 측정을 지정해야하므로 75 도가 75deg로 기록됩니다.

원하는만큼의 색상을 추가하십시오.

1. 그라데이션에는 여러 색상이있을 수 있습니다. 색상이 각각 변경되면

   색 중지

2. 라고합니다. 이 예제에서는 세 가지 색상을 보여줍니다.

   색상이 멈추는 위치를 결정합니다. 기본적으로 색상은 그라데이션을 따라 고르게 분포됩니다. 원하는 경우 임의의 색상을 원하는 그라데이션의 아무 곳에 나 나타나게 할 수 있습니다. 색상 정지 위치는 백분율로 표시됩니다. 첫 번째 및 마지막 색상 정지 점은 0 % 및 100 %로 추정되므로 위치를 추가 할 필요가 없습니다. 동일한 색상의 두 정지 지점을 제공하여 색상의 밴드를 만듭니다.

3. 상자 2는 흰색의 띠를 특징으로한다. 이 효과를 얻으려면 두 개의 색상 정지 점이 흰색으로 표시되며 하나는 33 %로 표시되고 다른 하나는 66 %로 표시됩니다. 그라디언트를 대략 3 분의 1로 나눕니다.

   갑작스런 색상 변경을 위해 동일한 위치에 두 가지 색상을 배치하십시오.

4. 갑작스런 색상 변경을 원할 경우 두 가지 색상을 같은 비율로두기 만하면됩니다.

   모든 브라우저에서 반복하십시오.

5. 이 기술이 더 표준화 될 때까지 다양한 브라우저를 고려해야합니다.

   방사형 그래디언트 작성 방법

6. CSS3는

   방사형 그래디언트

라는 두 번째 그라디언트 유형을 지원합니다. 기본적인 생각은 선형 그래디언트와 같은 직선을 따르는 것 외에는 동일합니다. 방사형 그래디언트가 요소의 중앙 지점에서 흐르고 바깥쪽으로 방사되는 것처럼 보입니다.

상자 3에 표시된 기본 방사형 그래디언트는이 CSS 코드로 생성됩니다. # box3 {background-image: radial-gradient (white, blue); background-image: -moz-radial-gradient (흰색, 파란색); background-image: -webkit-radial-gradient (white, blue);} 기본 방사형 그라디언트는 선형 그라디언트와 비슷하게 만들어진다. 그래디언트 함수.방사형 그래디언트는 많은 옵션을 가지고있어서 매우 유망하지만,이 다양한 표준에 대한 브라우저 지원은 매우 드문 것입니다. 박스 4는 세 가지 색상의 방사형 그래디언트를 가지고 있습니다:

# box4 {배경 이미지: 방사형 그래디언트 (빨강, 흰색, 파랑); background-image: -moz-radial-gradient (빨간색, 흰색, 파란색); background-image: -webkit-radial-gradient (red, white, blue);}

그라디언트의 중심을 원 안에있는 다른 점으로 변경하기 위해 그라디언트의 모양을 원형에서 타원으로 변경하는 것도 가능합니다. 요소를 지정하고 색상 중지를 지정합니다. 아직 실험적이기 때문에 현재의 사양을 확인해야합니다.