CSS 마스크를 사용하여 들쭉날쭉 한 가장자리를 만듭니다

CSS 마스크를 사용하여 들쭉날쭉 한 가장자리를 만듭니다

나는 최근에 프로젝트에서 배너 이미지의 맨 아래에 깔끔한 들쭉날쭉 한 가장자리를 만들어야했다.

이것은 내가 잠시 생각하게 만들었고 나는 그 과정에서 무언가를 배웠다! 나는 당신이 당신의 프로젝트에서도 그것을 사용할 수 있도록 내 방법을 적을 수 있다고 생각합니다.

일반적인 HTML 이미지와 래퍼 요소로 시작합니다.

<div>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174390595232013.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 마스크를 사용하여 들쭉날쭉 한 가장자리를 만듭니다">
</div>

그런 다음 Pseudo Element ::after ITS에 중복 된 배경 이미지를 배치합니다.

 .jagged-wrapper :: 이후 {
  콘텐츠: "";
  배경 이미지 : URL ( '데이터 : 이미지/SVG XML; UTF-8, <svg preserveaspectratio="none" viewbox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><polygon points="1,0 1,1 0,1 " style="fill:white;"></polygon></svg> ');
  배경 크기 : 30px 30px;
  너비 : 100%;
  높이 : 30px;
  위치 : 절대;
  하단 : 0px;
  오른쪽 : 0;
  z- 인덱스 : 2;
}

그 배경 이미지? 데이터 URI로 변환 된 SVG 코드입니다. 이것은 원래 SVG 코드입니다. Chris는 전환 프로세스를 설명하는 멋진 비디오를 가지고 있습니다.

<svg preserveaspectratio="none" viewbox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
  <polygon points="1,0 1,1 0,1 " style="fill: white;"></polygon>
</svg>

"끝났어!" 나는 생각했다.

이것이 효과가 있지만, 내 선함은 너무 귀찮습니다. 이와 같은 CSS에서 SVG 태그를 읽는 것은 어렵습니다. 또한 인용을 기억하는 것은 성가신 일입니다 (예 url('data:image/svg xml'...') ). 물론, 우리는 이것을 피하기 위해 SVG를 인코딩하는 Base64를 사용할 수 있지만 더 성가신 것입니다. 또한 SVG는 이미지와 동일한 배경색으로 채워져 있어야합니다.

잠깐, 이것이 마스크의 기능이 아닌가? 예! 예, 마스크가하는 일입니다.

이것은 새로운 접근 방식으로 이어집니다. 이와 같은 이미지를 CSS 마스크로 사용하여 배너 이미지의 "누락 된"부분이 실제로 누락 됩니다. 배너 상단에 배경색의 삼각형을 그리는 대신 배너에서 완전히 덮고 실제 배경을 보여주십시오. 그렇게하면 어떤 맥락에서도 작동 할 수 있습니다!

마스크는 거의 모든 곳에서 매우지지 적입니다. 적어도 여기에서 논의한 간단한 접근 방식에서. 우리는 또한 진보적 인 향상으로 구현할 수있는 것에 대해 이야기하고 있습니다. 주어진 브라우저에서 마스크를 지원하지 않으면 들쭉날쭉 한 효과가 없습니다. 분명히 세상의 끝이 아닙니다.

이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 버전 에서이 기능을 지원하고 나중에이 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일/태블릿

CSS 마스크의 작동 방법 중 하나는 알파 채널을 mask-image 로 제공하는 것입니다. 맹목적인 요소 인 기본 요소는 마스크 이미지의 알파 채널을 기반으로 (세미) 투명성을 결정합니다. 따라서 마스크 이미지가 투명한 배경의 흰색 찻 주전자 인 경우 블라인드 요소가 주전자 모양으로 잘리고 주전자 외부의 모든 것이 숨겨집니다.

마스크는 이해할 수없는 개념이 될 수 있습니다. Sarah Drasner는 편집과 다른 방법을 포함하여 마스크를 깊이 탐색하는 기사를 가지고 있습니다. 마스크는 우리가 여기서 논의하는 것보다 훨씬 더 많은 일을 할 수 있습니다. 자세한 내용은 사양, Caniuse 및 MDN을 확인하십시오.

우리가 필요로하는 것은 위의 SVG와 유사한 단일 "Jagged"이미지이며, 여기서 상단 절반은 흰색으로 채워지고 왼쪽 하단 코너는 반투명합니다. 그리고 이상적으로는 이미지가 실제 SVG가되어서는 안됩니다. 이는 이전에 Ugly Data Uri Chaos로 돌아갈 수 있기 때문입니다.

이 시점에서 "이봐, SVG를 CSS에 직접 포함시키고, 마스크를 정의하고, CSS를 SVG의 마스크 ID에 가리키십시오!"

좋은 생각! HTML을 편집 할 수 있다면 확실히 가능합니다. 그러나 특정 프로젝트의 경우 WordPress를 사용하고 있으며 추가 부품을 HTML에 주입하는 대신 순수한 CSS로 변경을 제한하고 싶습니다. 그것은 더 많은 일이 될 것입니다. 나는 이것이 드문 일이라고 생각하지 않습니다. 이러한 데모 변경의 경우 HTML을 편집 할 필요가 없습니다. 우리는 의미 적으로 쓸모없는 랩핑 요소를 피하는 것이 스타일 후크를 제공하기위한 것이라는 데 주로 동의하지만, 이것이 문서에 전체 SVG 태그를 추가하는데도 적용되는 것 같습니다.

CSS 선형 그라디언트를 사용하여 삼각형을 만들 수 있습니다.

 .el {
  백그라운드 이미지 : 선형 그레이드 (
    오른쪽 아래로
    하얀색,
    흰색 50%,
    투명한 50%,
    투명한
  );
}

이것은 방사형 배경에 미치는 영향이므로 진정으로 투명하다는 것을 알 수 있습니다.

기이! 배너의 mask-image 로 직접 사용할 수 있습니까? mask-size ( background-size 와 유사) 및 mask-repeat ( background-repeat 과 유사)을 설정해야하며 완료해야합니까?

불행히도, 아니요. 그렇게 좋지 않습니다.

첫 번째 이유는 Firefox를 사용하지 않는 한 위의 예에 마스크가 전혀 없다는 것을 알 수 있습니다. 글을 쓰는 시점에서 깜박임 및 WebKit은 여전히 ​​공급 업체 접두사가있는 마스크 만 지원하기 때문입니다. 이것은 우리가 -webkit- 접두사 버전의 모든 것을 필요로한다는 것을 의미합니다.

공급 업체 접두사 외에도 우리가하는 일은 개념적으로 잘못입니다. mask-size 사용하여 마스크를 이미지의 하단 줄무늬로 제한하면 나머지 이미지에는 mask-image 전혀 없으므로 완전히 모호하게됩니다. 그러므로 우리는 들쭉날쭉 한 것을 마스크 만 사용할 수 없습니다. 이미지와 같은 크기의 사각형 인 mask-image 필요하며 바닥에는 하나만 울려 퍼집니다.

이와 같이:

우리는 두 개의 그라디언트 이미지를 사용하여이를 수행합니다. 첫 번째 이미지는 위의 재배치 삼각형이며 repeat-x 로 설정되어 있으며 바닥에 위치하여 이미지의 하단 가장자리를 따라 반복됩니다. 두 번째 이미지는 다른 그라디언트이며, 바닥 30px가 투명한 (재깅을 방해하지 않기 위해), 상단 불투명 (데모의 검은 색에서 흰색으로) 및 요소의 전체 크기를 차지하는 또 다른 그라데이션입니다.

그래서 우리는 이제 바닥에 단일 삼각 톱니 모양 으로이 웨지 블록을 갖습니다. 마지막으로, 우리는이 블록을 가로로 반복하여 mask-image 로 사용할 수 있습니다.

그게 다야!

위 내용은 CSS 마스크를 사용하여 들쭉날쭉 한 가장자리를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!