하나의 요소를 다른 요소 아래에서 직조합니다

이 튜토리얼은 겹치는 요소로 시각적으로 매력적인 직조 효과를 만드는 CSS 기술을 보여줍니다. Bible Project 웹 사이트의 애니메이션에서 영감을 얻은이 방법은 CSS 블렌드 모드와 그리드를 사용하여 깨끗하고 효율적인 솔루션을 사용합니다.

우리는 이미지와 회전 프레임으로 시작합니다.

<div class="design">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="하나의 요소를 다른 요소 아래에서 직조합니다">
  <div class="rotated-border"></div>
</div>

초기 설정의 CSS :

 .설계 {
  위치 : 상대;
  높이 : 300px;
  너비 : 300px;
}

.design> * {
  위치 : 절대;
  높이 : 100%;
  너비 : 100%;
}

.ROTATED BORDER {
  박스 사이징 : 국경 박스;
  테두리 : 15px #EB311F 고체;
  변환 : 회전 (45deg);
  Box-Shadow : 0 0 10PX #EB311F, 삽입 0 20PX #EB311F;
}

빨간색 프레임은 border 속성을 사용하여 생성됩니다. box-sizing: border-box 프레임이 회전 후 중앙에 남아 있는지 확인합니다.

다음으로 이미지 및 CSS 블렌드 모드의 사본을 사용하여 기본 이미지 및 프레임의 일부를 선택적으로 표시합니다. 우리는 이미지의 일부를 가리기 위해 흰색 그리드 셀을 오버레이하여이를 달성합니다.

HTML 구조가 확장됩니다.

<div class="design">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="하나의 요소를 다른 요소 아래에서 직조합니다">
  <div class="rotated-border"></div>
  <div class="blend">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="하나의 요소를 다른 요소 아래에서 직조합니다">
    <div class="grid">
      <div></div>
      <div data-white></div>
      <div data-white></div>
      <div></div>
    </div>
  </div>
  <div class="blend2">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="하나의 요소를 다른 요소 아래에서 직조합니다">
    <div class="grid2">
      <div data-white></div>
      <div></div>
      <div></div>
      <div data-white></div>
    </div>
  </div>
</div>

블렌드 및 그리드의 CSS :

 .Blend, .Blend2 {
  위치 : 절대;
  높이 : 100%;
  너비 : 100%;
  믹스 블렌드 모드 : 곱;
}

.grid, .grid2 {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (2, 1fr);
  그리드-템플릿 열 : 반복 (2, 1fr);
  위치 : 절대;
  높이 : 100%;
  너비 : 100%;
}

[데이터 백인] {
  배경색 : 흰색;
}

mix-blend-mode: multiply; 투명성 효과를 만듭니다. 그리드는 회전 된 프레임의 원치 않는 부분을 가리기 위해 흰색 상자를 전략적으로 배치합니다. 두 번째 그리드 및 이미지 ( blend2 )가 추가되어 원하는 영역에서 흰색을 복원합니다.

이 레이어링 및 블렌드 모드 조합은 직조 효과를 생성합니다. CSS 마스킹은 대안이 될 수 있지만 블렌드 모드는 그리드를 사용하여 더 나은 브라우저 호환성과 간단한 구현을 제공합니다. 사분면 생성을위한 그리드의 선택은 편의를위한 것입니다. Flexbox 또는 기타 방법도 사용할 수 있습니다. data-white 속성은 클리너 HTML을위한 문체 선택입니다. screen , darken 또는 lighten 과 같은 다른 블렌드 모드는 그리드 셀 색상을 조정하여 유사한 결과를 얻을 수 있습니다.

위 내용은 하나의 요소를 다른 요소 아래에서 직조합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!