배경 패턴을 구축하여 CSS 방사형 그래디언트 제작하는 방법

배경 패턴을 구축하여 CSS 방사형 그래디언트 제작하는 방법

 

CSS 그라디언트를 처음 접하는 경우 radial-gradient(). 이전에 사용한 적이 없다면 이에 대해 배울 수 있는 올바른 위치에 있습니다. 이 튜토리얼에서는 그 뒤에 숨겨진 비밀을 설명하기 위해 몇 가지 실제적이고 실용적인 예에 초점을 맞출 것입니다. radial-gradient() 작동 방식. CSS Gradients는 일반적으로 멋진 패턴을 만드는 데 사용되므로 몇 가지를 선택했습니다. radial-gradient(). 그것들을 구축함으로써 우리는 이러한 그라디언트에 대한 모든 것을 배울 것입니다.

방사형 그라데이션 패턴 #1

가장 기본적인 패턴부터 시작하겠습니다.

방사형 그라데이션으로 만든 패턴

지금까지 복잡한 것은 없습니다. 단순히 원을 반복하는 것입니다. 원, 타원, 반원, 1/4 원 등... 모두 다른 모양을 사용하여 만들 수 있습니다. radial-gradient(). 간단하게 하기 위해 원이 타원의 특수한 경우이기 때문에 타원을 주요 모양으로 간주할 수 있습니다. 그런 다음 일부 부품을 숨겨서 원의 절반, 원의 1/4 등을 얻습니다. 패턴을 확대하여 다른 값을 식별해 보겠습니다.

패턴의 다른 값의 그림

우리는 치수가 다음과 같은 영역 내부를 그리고 있습니다. 100px*100px 우리의 background-size. 우리는 수평 반경을 다음과 같이 고려할 것입니다. 50% 그리고 수직 하나는 다음과 같습니다. 50% 그리고 우리 모양의 중심은 영역의 중심이 될 것입니다. 타원은 "수평 반경"과 "수직 반경"이라는 두 개의 반경으로 정의됩니다. 둘 다 같으면 (우리의 경우와 같이) 원이 생깁니다. 이것은 우리에게 다음 코드를 줄 것입니다:

html {
 background-image: radial-gradient(50% 50% at center, ???);
 background-size: 100px 100px
}

그라디언트 설정을 정의했으며 이제 색상 구성을 정의해야 합니다. 우리는 가장자리에 닿지 않는 원을 그립니다. background-size 영역. 로부터 50%우리는 가질 것입니다 80% 기본 색상과 나머지는 투명합니다.

html {
 background-image: radial-gradient(50% 50% at center, #c39f76 0% 80%,#0000 81% 100%);
 background-size: 100px 100px
}

기본적으로 먼저 타원의 중심과 크기를 정의합니다( 50% 50% at center) 그런 다음 그라디언트 색상으로 채웁니다( c39f76 0 80%,#0000 81% 100%). 두 반지름이 동일하기 때문에 이 경우 완전한 원을 얻습니다( 50% ~의 100px ) 그리고 색상 사이에 전환이 없기 때문입니다. 우리는 기본 색상에서 0% 에게 80% 에서 투명 81% 에게 100%. (우리는 사용했어야 80% 대신에 81% 그러나 들쭉날쭉한 가장자리를 피하기 위해 작은 전환을 유지합니다.) 이를 얻기 위해 기본값을 제거하여 위의 코드를 최적화할 수 있습니다.

html {
 background-image: radial-gradient(50% 50%,#c39f76 80%,#0000 81%);
 background-size: 100px 100px
}

위치는 기본적으로 중앙이며 생략할 수 있습니다. 0% 그리고 100% 색상 구성에서. 위의 구문이 해당 패턴을 달성하는 유일한 구문은 아닙니다. 다음을 사용할 수도 있습니다.

html {
 background-image: radial-gradient(40% 40%,#c39f76 99%,#0000);
 background-size: 100px 100px
}

우리는 원의 반지름을 줄이고 기본 색상의 백분율을 늘립니다. 투명 색상이 있어야 하므로 백분율을 정의하지 않았습니다. 100% (기본값)은 생략할 수 있습니다. 다음을 사용할 수도 있습니다.

html {
 background-image: radial-gradient(#c39f76 56%,#0000 57%);
 background-size: 100px 100px
}

반경을 생략하고 브라우저는 다른 색상 구성이 필요한 기본 설정을 사용합니다. 모든 경우를 암기할 필요는 없으며 한 가지 쉬운 방법을 고수하십시오(첫 번째 방법을 권장합니다). 나중에 연습을 통해 동일한 결과를 얻는 다양한 방법을 발견하게 될 것이며 마지막 예제에서 했던 것처럼 사용된 코드의 양을 줄이기 위해 구문을 최적화할 수 있을 것입니다.

방사형 그라데이션 패턴 #2

방사형 그라데이션으로 만든 패턴

이것을 위해 나는 2를 사용할 것입니다 radial-gradient()에스. 원하는 만큼 배경 레이어를 가질 수 있다는 것을 잊지 마십시오. 이것은 다른 구성과 다른 그라디언트를 결합하여 복잡한 패턴을 만들 수 있는 훌륭한 기능입니다.

우리는 동일하게 유지하고 있습니다 background-size 여기에 있지만 우리는 서클에 대해 다른 위치를 사용하고 있습니다. 코드는 다음과 같습니다.

html {
 background-image:
 radial-gradient(?? at 25% 25%,??),
 radial-gradient(?? at 75% 75%,??);
 background-size: 100px 100px;
}

반경 구성의 경우 수학을 수행하면 다음이 필요하다는 것을 알 수 있습니다. 25% 두 원이 가장자리에 닿도록 합니다. 따라서 다음 코드를 사용할 수 있습니다.

html {
 background-image:
 radial-gradient(25% 25% at 25% 25%,#c39f76 80%,#0000 81%),
 radial-gradient(25% 25% at 75% 75%,#c39f76 80%,#0000 81%);
 background-size: 100px 100px;
}

우리는 또한 사용할 수 있습니다 closest-side 대신에 25% 25%. 나는 그것이 이상한 값이라는 것을 압니다. 그러나 그것은 "원이 중심에 가장 가까운 면에 닿도록 하는 반지름 값을 사용하십시오"를 의미합니다. 이 값은 유용하며 복잡한 계산을 처리하지 않아도 됩니다.

html {
 background-image:
 radial-gradient(closest-side at 25% 25%,#c39f76 80%,#0000 81%),
 radial-gradient(closest-side at 75% 75%,#c39f76 80%,#0000 81%);
 background-size: 100px 100px;
}

radial-gradient() 3개의 다른 유사한 값을 제공하십시오( closest-corner, farthest-side그리고 farthest-corner). 반경에 대한 명시적 크기를 정의하거나 해당 값을 사용하면 브라우저가 특정 규칙에 따라 반경을 자동으로 찾습니다. 앞서 말했듯이 모든 것을 외울 필요는 없습니다. 의 기본에 집중하려고 노력하고 있습니다. radial-gradient() 나중에 사용할 수 있도록 가능한 한 많은 정보를 제공합니다.

방사형 그라데이션 패턴 #3

이걸로 난이도를 높이고 있습니다. 1차, 2차 패턴 후에는 더 복잡한 패턴을 시도할 수 있습니다. 이것은 또한 완전한 원이 아니라 두 개의 반원의 조합이 있는 두 개의 그라디언트를 사용하여 만들어집니다. 다음은 퍼즐을 이해하는 데 도움이 되는 그림입니다. 각 그라디언트를 쉽게 식별하기 위해 다른 색상을 사용하고 있습니다.

첫 번째 그라디언트의 중심은 다음 위치에 배치됩니다. 50% 100% 두 번째가 에 배치되는 동안 50% 0% 그러나 우리는 또한 사용할 수 있습니다 top 그리고 bottom 동등한 값으로.

html {
 background-image:
 radial-gradient(?? at top ,??),
 radial-gradient(?? at bottom,??);
 background-size: 100px 100px;
}

반경에 대해 다음을 사용할 수 있습니다. 50% 50% 전에 했던 것처럼 하지만 이번에는 다른 것을 시도하고 고려할 것입니다. 50px 절반은 background-size. 픽셀 값이나 백분율과 다른 단위를 사용할 때 하나의 반지름만 지정할 수 있으며 브라우저는 해당 반지름을 가진 원을 원한다는 것을 이해할 것입니다. 이것은 백분율 및 특정 값 외에 모양의 크기를 정의하는 또 다른 방법입니다. 원이 가장자리에 닿아 코드가 다음과 같을 것입니다.

html {
 background-image:
 radial-gradient(50px at top ,#c39f76 99%,#0000),
 radial-gradient(50px at bottom,#c39f76 99%,#0000);
 background-size: 100px 100px;
}

예, 위의 내용은 우리가 원하는 패턴을 제공하지 않습니다. 여전히 최종 수정이 필요합니다. 이전 그림을 확인하면 두 번째 그래디언트(녹색)가 오른쪽으로 절반 크기만큼 이동한 것을 알 수 있습니다. 즉, 업데이트해야 합니다. background-position:

html {
 background-image:
 radial-gradient(50px at top ,#c39f76 99%,#0000),
 radial-gradient(50px at bottom,#c39f76 99%,#0000);
 background-position: 0 0, 50px 0;
 background-size: 100px 100px;
}

약식 버전을 사용하여 코드를 약간 최적화할 수 있습니다.

html {
 background:
 radial-gradient(50px at top ,#c39f76 99%,#0000),
 radial-gradient(50px at bottom,#c39f76 99%,#0000) 50px 0;
 background-size: 100px 100px;
}

그리고 픽셀 값을 다루기 때문에 CSS 변수를 추가하여 코드를 쉽게 조정할 수 있습니다.

html {
 --s: 100px;
 background:
 radial-gradient(calc(var(--s)/2) at top ,#c39f76 99%,#0000),
 radial-gradient(calc(var(--s)/2) at bottom,#c39f76 99%,#0000) calc(var(--s)/2) 0;
 background-size: var(--s) var(--s);
}

다른 값을 업데이트하는 대신 하나만 변경합니다!

방사형 그라데이션 패턴 #4

방사형 그라데이션으로 만든 패턴 배경

언뜻보기에이 배경은 약간 복잡해 보입니다. 그러나 올바른 패턴을 식별할 수 있다면 쉬워집니다. 이러한 배경을 다룰 때 가장 어려운 부분입니다. 때로는 다른 배경 레이어를 식별하는 것이 쉽지 않습니다. 이 운동을 더 잘하기 위한 제 조언은 연습하는 것입니다. 직관적으로 패턴이 이 패턴이라고 생각할 수 있으며 그라디언트를 찾는 데 어려움을 겪을 것입니다.

하지만 그렇지 않습니다. 진짜 패턴은 이거다

작은 오버플로가 있는 모서리에 4개의 원이 배치되었습니다. 코드는 다음과 같습니다.

html {
 background:
 radial-gradient(closest-corner at 20% 20%,#c39f76 98%,#0000),
 radial-gradient(closest-corner at 80% 20%,#c39f76 98%,#0000),
 radial-gradient(closest-corner at 20% 80%,#c39f76 98%,#0000),
 radial-gradient(closest-corner at 80% 80%,#c39f76 98%,#0000);
 background-size: 100px 100px;
}

좋은 용도 closest-corner 반경을 정의합니다. 각 레이어에 대해 브라우저는 특정 위치에 배치된 원을 그리고 가장 가까운 모서리를 터치합니다. 이 설정을 사용하면 필요한 오버플로가 있으면서도 쉬운 색상 구성을 사용할 수 있습니다. 우리는 또한 사용할 수 있습니다 closest-side 아래와 같이:

html {
 background:
 radial-gradient(closest-side at 20% 20%,#c39f76 140%,#0000 141%),
 radial-gradient(closest-side at 80% 20%,#c39f76 140%,#0000 141%),
 radial-gradient(closest-side at 20% 80%,#c39f76 140%,#0000 141%),
 radial-gradient(closest-side at 80% 80%,#c39f76 140%,#0000 141%);
 background-size: 100px 100px;
}

위 코드의 유일한 새로운 점은 다음보다 큰 값을 사용하는 색상 구성입니다. 100%. 내가 사용하고 있기 때문에 closest-side 반경을 정의하려면 100% 오버플로를 생성합니다. 그러한 트릭을 잊지 마십시오. 도움이 될 수 있습니다. 색상 값은 범위에 제한되지 않습니다. [0% 100%] – 더 커질 수 있습니다. 이러한 상황에서 색상 구성의 반복을 피하기 위해 CSS 변수에 의존할 수도 있습니다.

html {
 --c: #c39f76 98%,#0000;
 background:
 radial-gradient(closest-corner at 20% 20%,var(--c)),
 radial-gradient(closest-corner at 80% 20%,var(--c)),
 radial-gradient(closest-corner at 20% 80%,var(--c)),
 radial-gradient(closest-corner at 80% 80%,var(--c));
 background-size: 100px 100px;
}

방사형 그라데이션 패턴 #5

방사형 그라데이션으로 만든 패턴

많은 사람들을 혼란스럽게 할 수 있는 또 다른 직관적이지 않은 패턴이 있습니다. 반쯤 채워진 원으로 볼 수 있으며 어떻게 달성할 수 있는지 궁금할 수 있습니다. 실제로는 아래와 같은 두 개의 반원의 조합입니다.

코드는 다음과 같습니다.

html {
 background:
 radial-gradient(50% 50% at left ,#0000 70%,#c39f76 71% 80%,#0000 81%),
 radial-gradient(50% 50% at right,#c39f76 0 80%,#0000 81%);
 background-size: 100px 100px;
}

이번에는 각각 다른 색상 구성을 사용하고 있습니다. 첫 번째 색상에는 3가지 색상이 있습니다(투명한 다음 기본 색상, 다시 투명). 두 번째는 이전 예제에서 사용한 것과 동일한 색상 구성을 가지고 있습니다. 이 패턴은 다양한 색상 구성이 복잡한 배경 패턴을 얻는 또 다른 방법이 될 수 있음을 보여주는 좋은 예입니다.

방사형 그라데이션 패턴 #6

이것은 다른 레이어를 식별하기가 쉽지 않은 또 다른 패턴이지만 자세히 보면 두 개의 원이 보입니다.

큰 원은 우리의 첫 번째 레이어입니다.

영역의 중심에 배치된 원입니다( background-size 평소와 다름) 하지만 이번에는 색상 구성이 평소와 다릅니다. 안쪽은 투명색, 바깥쪽은 메인색을 사용하고 있습니다. 약간의 오버플로도 있음에 유의해야 합니다.

html {
 background-image: radial-gradient(54% 54%,#0000 98%,#c39f76);
 background-size: 100px 100px;
}

보시다시피 제가 사용하고 있는 54% 대신에 50% 오버플로를 생성합니다. 두 번째 레이어는 흰색을 기본 색상으로 하는 작은 원입니다. 전체 코드는 다음과 같습니다.

html {
 background:
 radial-gradient(10% 10%,#fff 98%,#0000),
 radial-gradient(54% 54%,#0000 98%,#c39f76) 50px 50px;
 background-size:100px 100px;
}

의 사용을 참고하세요 50px 50px. 세 번째 패턴과 마찬가지로 올바른 결과를 얻으려면 레이어 중 하나를 절반 크기로 이동해야 합니다. 그렇지 않으면 두 원이 의도한 결과가 아닌 동일한 중심을 갖게 됩니다.

방사형 그라데이션 패턴 #7

종료하기 전 마지막 패턴은 다음과 같습니다.

이 마지막 예를 통해 소개하고 싶은 repeating-radial-gradient() 쓰는 또 다른 방법입니다 radial-gradient(). 우리의 패턴은 다음과 같습니다:

우리는 다음을 사용하여 위의 것을 달성할 수 있습니다 radial-gradient() 그러나 색상 구성이 너무 길어집니다(투명, 기본 색상, 투명, 기본 색상 등). 이 경우 색상 구성은 "투명, 기본 색상"과 repeating-radial-gradient() 그러한 목적으로 만들어집니다. 패턴 색상 구성을 정의할 수 있습니다.

html {
 background-image: repeating-radial-gradient(#0000 0% 12%,#c39f76 13% 26% );
 background-size:100px 100px;
}

위의 의미는 우리가 12% 투명한 색상의 다음 13% 메인 컬러( 26 - 13 = 13) 그런 다음 모든 영역을 덮을 때까지 동일하게 반복합니다.

마무리

다양한 배경 패턴을 만드는 방법을 탐색하여 radial-gradient(). 기사는 여기서 끝이지만 이것은 시작에 불과합니다. radial-gradient() 는 방금 본 간단한 예제보다 복잡하지만 이제 연습하고 익숙해지는 데 필요한 도구가 있습니다. 다음을 사용하여 자신만의 패턴을 만들어 보세요. radial-gradient(). 패턴 생성은 CSS 그라디언트를 파악하는 가장 좋은 방법입니다. 다음은 더 자세한 정보를 얻을 수 있는 몇 가지 참조 사항입니다.

Radial-gradient() - CSS: CSS(Cascading Style Sheets) | MDN Radial-gradient() CSS 함수는 원점에서 방사되는 둘 이상의 색상 간의 점진적 전환으로 구성된 이미지를 만듭니다. 그 모양은 원이나 타원일 수 있습니다. 함수의 결과는 <이미지>의 특수한 종류인 <그라디언트> 데이터 유형의 개체입니다.

CSS 이미지 모듈 레벨 3

읽어 주셔서 감사합니다! 더 많은 CSS 팁을 보려면 나를 팔로우하세요. 트위터. 저를 지원하고 싶으신가요? 당신은 나에게 커피를 사거나 후원자가 될 수 있습니다.