반복되는 지그재그 패턴으로 CSS 테두리를 만들어 본 적이 있습니까? 웹사이트의 컬러 섹션이 끝나고 다른 컬러 섹션이 시작되는 곳과 같이 직선이 아니라 각진 지그재그, 둥근 혹 또는 파도로 시작됩니다. 이러한 종류의 CSS 테두리를 수행할 수 있는 여러 가지 방법이 있습니다. background-image. 그러나 우리는 그것으로 더 현대적이고 프로그래밍적일 수 있습니다. 이 기사에서는 모양을 구현하기 위한 몇 가지 최신 CSS 마스크 기술을 살펴보겠습니다.
기술적인 부분을 살펴보기 전에 우리가 무엇을 만들고 있는지 살펴보겠습니다. 나는 만들었다 CSS 테두리 생성기 몇 초 안에 모든 종류의 테두리를 쉽게 생성하고 CSS 코드를 얻을 수 있습니다.
그거 봤어? 와 더불어 CSS mask 재산 그리고 몇 가지 CSS 그라디언트, 우리는 CSS 자체로 반응이 빠르고 멋진 테두리를 얻습니다. 뿐만 아니라 이러한 효과는 모든 종류의 착색(예: 이미지, 그라디언트 등)을 가질 수 있는 모든 요소에 적용할 수 있습니다. 우리는 추가 요소, 의사 요소 또는 아무데서 오는 마법의 숫자 없이 이 모든 것을 얻습니다!
오 좋은! 내가 해야 할 일은 코드를 복사/붙여넣기만 하면 끝입니다!
사실이지만 필요한 경우 코드를 수동으로 조정할 수 있는 논리를 이해하는 것이 좋습니다.
마스킹 물건
우리의 모든 효과는 CSS에 의존하기 때문에 mask 속성이 어떻게 작동하는지 간단히 살펴보겠습니다. 에서 바로 사양:
그래픽 개체에 마스크를 적용하는 효과는 마치 그래픽 개체가 마스크를 통해 배경에 칠해져 그래픽 개체의 일부를 완전히 또는 부분적으로 마스킹하는 것과 같습니다.
우리가 확인하면 형식 구문 의 mask 우리가 볼 수있는 속성은 수락 <image> 이미지의 URL 또는 색상 그라디언트를 의미하는 값으로. 여기서 사용할 것은 그라디언트입니다. 기본 예제부터 시작하겠습니다.
이 데모의 첫 번째 예에서는 그라디언트를 사용하여 이미지가 사라지는 것처럼 보이게 합니다. 한편 두 번째 예에서도 그라디언트를 사용하지만 색상 간의 부드러운 전환보다는 하드 컬러 스톱 이미지의 절반을 숨기거나 마스크하는 데 사용됩니다. 두 번째 예는 멋진 테두리를 만드는 데 사용할 기술을 보여줍니다.
아 그리고 CSS mask 속성은 쉼표로 구분되는 한 여러 그라디언트를 사용할 수 있습니다. 즉, 이미지의 추가 부분을 마스킹할 수 있는 더 많은 제어 권한이 있습니다.
다중 마스킹 그라디언트를 표시하는 이 예는 언뜻 보기에는 약간 까다로워 보일 수 있지만 발생하는 일은 background 재산. 그러나 페이지 배경과 혼합되는 색상을 사용하는 대신 "투명한" 검정 값(#0000) 이미지의 숨겨진 부분 및 전체 검정색(#000) 보이는 부분.
그게 다야! 이제 우리는 멋진 경계를 다룰 수 있습니다.
지그재그 CSS 테두리
이 기사의 시작 부분에 있는 비디오에서 보았듯이, 발전기 한 면, 양면 또는 모든 면에 테두리를 적용할 수 있습니다. 단계별 그림을 사용하여 아래쪽부터 시작하겠습니다.
- 단색(
red) 상단에. 와 같은 높이calc(100% - 40px)떠나는 데 사용됩니다40px하단의 빈 공간. - 컨테이너의 나머지 높이를 취하는 두 번째 그라디언트를 맨 아래에 추가합니다. 이 작업을 수행하기 위해 약간의 기하학이 발생합니다.
- 다음으로 마지막 그라디언트를 수평으로 반복합니다(바꾸기
no-repeat과repeat-x). 우리는 이미 지그재그 모양을 볼 수 있습니다! - 그라디언트에는 들쭉날쭉한 가장자리를 만드는 앤티 앨리어싱 문제가 있는 것으로 알려져 있습니다(특히 Chrome에서). 이를 피하기 위해 색상 사이에 약간의 전환을 추가하여
blue 90deg, green 0에green, blue 1deg 89deg, green 90deg. - 그런 다음 균일한 모양을 갖도록 색상을 업데이트합니다.
- 마지막으로 내부의 모든 것을 사용합니다.
mask재산!
이러한 단계에서 두 개의 변수를 추출하여 모양을 정의할 수 있습니다.40px) 및 각도(90deg). 이러한 변수에 대한 자리 표시자를 사용하여 이를 표현하는 방법은 다음과 같습니다. 저는 JavaScript를 사용하여 해당 변수를 최종 값으로 바꿀 것입니다.
mask: linear-gradient(red 0 0) top/100% calc(100% - {size}) no-repeat, conic-gradient( from {-angle/2} at bottom, #0000, #000 1deg {angle - 1} ,#0000 {angle} ) bottom/{size*2*tan(angle/2)} {size} repeat-x;크기와 각도에 대해 CSS 사용자 정의 속성을 사용할 수 있지만 삼각 함수는 현재 지원되지 않는 기능입니다. 앞으로는 다음과 같이 할 수 있습니다.
--size: 40px;
--angle: 90deg;
mask: linear-gradient(red 0 0) top/100% calc(100% - var(--size)) no-repeat, conic-gradient( from calc(var(--angle)/-2) at bottom, #0000, #000 1deg calc(var(--angle) - 1deg), #0000 var(--angle) ) bottom/calc(var(--size)*2*tan(var(--angle)/2)) var(--size) repeat-x;아래쪽 테두리와 유사하게 위쪽 테두리는 몇 가지 조정을 통해 거의 동일한 코드를 갖게 됩니다.
mask: linear-gradient(red 0 0) bottom/100% calc(100% - {size}) no-repeat, conic-gradient( from {180deg - angle/2} at top, #0000, #000 1deg {angle - 1}, #0000 {angle} ) top/{size*2*tan(angle/2)} {size} repeat-x;우리는 변했다 bottom 과 top 및 top 과 bottom, 그런 다음 그라디언트의 회전을 다음으로 업데이트했습니다. 180deg - angle/2 대신 -angle/2. 저것과 같이 쉬운!
이것이 왼쪽과 같이 나머지 면에 사용할 수 있는 패턴입니다.
mask: linear-gradient(red 0 0) right/calc(100% - {size}) 100% no-repeat, conic-gradient( from {90deg - angle/2} at left, #0000, #000 1deg {angle - 1}, #0000 {angle} ) left/{size} {size*2*tan(angle/2)} repeat-y;… 그리고 권리:
mask: linear-gradient(red 0 0) left/calc(100% - {size}) 100% no-repeat, conic-gradient( from {-90deg - angle/2} at right, #0000, #000 1deg {angle - 1}, #0000 {angle} ) right/{size} {size*2*tan(angle/2)} repeat-y;한 번에 양면에 바를 때를 위한 테두리를 만들어 봅시다. 실제로 동일한 코드를 재사용할 수 있습니다. 상단 및 하단 테두리를 모두 얻으려면 상단 및 하단 테두리의 코드를 결합하기만 하면 됩니다.
우리는을 사용하여 conic-gradient() 윗면의, conic-gradient() 하단 측면 플러스 linear-gradient() 중간 영역을 덮습니다.
mask: linear-gradient(#000 0 0) center/100% calc(100% - {2*size}) no-repeat, conic-gradient( from {-angle/2} at bottom, #0000, #000 1deg {angle - 1}, #0000 {angle} ) bottom/{size*2*tan(angle/2)} {size} repeat-x; conic-gradient( from {180deg - angle/2} at top, #0000, #000 1deg {angle - 1}, #0000 {angle} ) top/{size*2*tan(angle/2)} {size} repeat-x;왼쪽과 오른쪽에 테두리를 함께 적용할 때도 마찬가지입니다.
mask: linear-gradient(#000 0 0) center/calc(100% - {2*size}) 100% no-repeat, conic-gradient( from {90deg - angle/2} at left, #0000, #000 1deg {angle - 1}, #0000 {angle} ) left/{size} {size*2*tan(angle/2)} repeat-y, conic-gradient( from {-90deg - angle/2} at right, #0000, #000 1deg {angle - 1}, #0000 {angle} ) right/{size} {size*2*tan(angle/2)} repeat-y;그래서 한 번에 모든 면에 테두리를 적용하려면 모든 그라디언트를 함께 추가해야 합니다. 맞죠?
정확히! 우리는 XNUMX개의 원뿔형 그라디언트(각 면에 하나씩)와 linear-gradient() 중간에. 우리는 고정 각도를 다음과 같이 설정합니다. 90deg 이상한 겹침 없이 더 멋진 모서리를 만드는 유일한 방법이기 때문입니다. 저도 사용중이니 참고하세요 space 대신 repeat-x or repeat-y 다음과 같은 모서리에서 나쁜 결과를 피하기 위해:
둥근 CSS 테두리
이제 둥근 테두리를 처리해 봅시다!
안 돼! 계산이 많은 또 다른 긴 설명?!
별말씀을 요! 여기에 설명할 것이 없습니다. 지그재그 예제에서 모든 것을 가져와 업데이트합니다. conic-gradient() 와 radial-gradient(). 처리할 각도가 없고 크기 변수만 있기 때문에 훨씬 쉽습니다.
다음은 지그재그 테두리에서 둥근 테두리로 전환하기 위해 수행해야 하는 작업이 얼마나 작은지 확인하기 위한 한 쪽의 그림입니다.
다시 말하지만, 내가 한 모든 것은 교체하는 것뿐이었습니다. conic-gradient() 이것으로(크기에 대한 자리 표시자 사용):
background: radial-gradient(circle farthest-side, #0000 98%, #000) 50% calc(100% + {size})/{1.85*size} {2*size} repeat-x그리고 이것은 두 번째 것입니다.
background: radial-gradient(circle farthest-side, #000 98%, #0000) bottom/{1.85*size} {2*size} repeat-x마법의 숫자 1.85와 98% 뒤에 있는 논리는 무엇입니까?
논리적으로 우리는 100% 대신 98% 배경 영역의 가장자리에 닿는 원이 있습니다. 하지만 다시 말하지만, 앤티 앨리어싱 문제와 들쭉날쭉한 가장자리입니다. 이상한 겹침을 방지하기 위해 약간 작은 값을 사용합니다.
XNUMXD덴탈의 1.85 가치는 무엇보다 개인의 취향입니다. 나는 처음에 사용 2 이것은 완벽한 원을 얻기 위한 논리적 값이지만 결과가 그다지 좋아 보이지 않으므로 값이 작을수록 원 사이에 더 매끄러운 겹침이 생성됩니다.
차이점은 다음과 같습니다.
이제 지그재그 CSS 테두리에서 했던 것처럼 나머지 면에 대해서도 이것을 복제해야 합니다.
단, XNUMX면을 동시에 도포하면 약간의 차이가 있습니다. 둥근 테두리 중 하나에 대해 하나만 사용했음을 알 수 있습니다. radial-gradient() XNUMX 대신. 아래 그림과 같이 하나의 그라디언트를 사용하여 모든 면에 원형 모양을 반복할 수 있기 때문에 의미가 있습니다.
최종 CSS는 다음과 같습니다.
mask: linear-gradient(#000 0 0) center/calc(100% - {1.85*size}) calc(100% - {1.85*size}) no-repeat, radial-gradient(farthest-side,#000 98%,#0000) 0 0/{2*size} {2*size} round;제가 어떻게 사용하는지 참고하세요 round 대신 가치 repeat. 그것은 우리가 원을 자르지 않도록 하기 위함입니다. 그리고 다시, 그 1.85 값은 개인 취향 값입니다.
다른 유형의 둥근 테두리의 경우 여전히 XNUMX개의 방사형 그래디언트를 사용해야 하지만 CSS를 도입해야 했습니다. clip-path 모서리에서 겹치는 문제를 수정하는 속성입니다. 있는 것과 없는 것의 차이를 알 수 있습니다 clip-path 다음 데모에서:
모서리를 자르는 XNUMX점 경로입니다.
clip-path: polygon( {2*size} 0,calc(100% - {2*size}) 0, 100% {2*size},100% calc(100% - {2*size}), calc(100% - {2*size}) 100%,{2*size} 100%, 0 calc(100% - {2*size}),0 {2*size}
);물결 모양 CSS 테두리
지그재그와 둥근 CSS 테두리 모두 우리가 원하는 모양을 얻기 위해 하나의 그라디언트가 필요했습니다. 물결 모양의 테두리는 어떻습니까? 두 개의 그라디언트가 필요합니다. 아래는 두 개의 방사형 그라디언트로 하나의 웨이브를 만드는 방법을 이해하기 위한 그림입니다.
우리는 맨 아래에서 그 모양을 반복하고 맨 위에서 선형 그라디언트를 반복하고 맨 아래에 물결 모양의 테두리를 얻습니다.
mask: linear-gradient(#000 0 0) top/100% calc(100% - {2*size}) no-repeat, radial-gradient(circle {size} at 75% 100%,#0000 98%,#000) 50% calc(100% - {size})/{4*size} {size} repeat-x, radial-gradient(circle closest-side at 25% 50%,#000 99%,#0000 101%) bottom/{4*size} {2*size} repeat-x;지그재그 및 둥근 CSS 테두리로 했던 것과 같이 다른 면에 대해서도 동일한 프로세스를 수행합니다. 우리가 필요한 것은 각 측면에 대해 다른 웨이브를 갖도록 몇 가지 변수를 업데이트하는 것입니다.
9면 모두에 물결 모양의 CSS 테두리를 적용하는 것은 어떻습니까? 총 XNUMX개의 그라디언트가 있습니까?”
아니요. 물결 모양의 테두리가 XNUMX면 모두에 적용되는 데모가 없기 때문입니다. 모서리에서 좋은 결과를 제공하는 그라디언트 조합을 찾을 수 없었습니다. 이 글을 읽는 누군가가 좋은 접근 방식을 알고 있을까요? 😉
그건 경계라인 좋은 물건!
그래서, 당신은 내부와 외부를 알고 내 멋진 온라인 CSS 테두리 생성기! 물론, 코드가 뱉어내는 코드를 사용하고 잘 할 수 있습니다. 하지만 이제 당신은 그것을 작동시키는 비밀 소스 레시피를 갖게 되었습니다.
특히 요소의 일부를 마스킹하기 위해 그라디언트를 사용하는 방법을 살펴보았습니다. 그런 다음 우리는 작업에 갔다 여러 그라디언트 CSS 마스크에서 특정 모양을 만들기 위한 그라디언트. 그리고 그 결과는 요소의 가장자리를 따라 사용할 수 있는 패턴으로, 그렇지 않으면 결과로 나타날 수 있는 멋진 테두리 모양을 만듭니다. background-image 을위한. 이런 식으로만 전체 래스터 이미지 파일이나 다른 것을 교체하는 대신 일부 값을 교체하여 모양을 변경하면 됩니다.
