Weaving One Element Over and Under Another Element

This tutorial demonstrates a CSS technique to create a visually appealing weaving effect with overlapping elements. Inspired by animations on The Bible Project's website, this method uses CSS blend modes and grid for a clean and efficient solution.

We begin with an image and a rotated frame overlaid on it.

<div class="design">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg" class="lazy" alt="Weaving One Element Over and Under Another Element ">
  <div class="rotated-border"></div>
</div>

The CSS for the initial setup:

.design {
  position: relative;
  height: 300px;
  width: 300px;
}

.design > * {
  position: absolute;
  height: 100%;
  width: 100%;
}

.rotated-border {
  box-sizing: border-box;
  border: 15px #eb311f solid;
  transform: rotate(45deg);
  box-shadow: 0 0 10px #eb311f, inset 0 0 20px #eb311f;
}

The red frame is created using the border property. box-sizing: border-box ensures the frame remains centered after rotation.

Next, we use a copy of the image and CSS blend modes to selectively reveal portions of the underlying image and frame. We achieve this by overlaying white grid cells to mask parts of the image.

The HTML structure is extended:

<div class="design">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg" class="lazy" alt="Weaving One Element Over and Under Another Element ">
  <div class="rotated-border"></div>
  <div class="blend">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg" class="lazy" alt="Weaving One Element Over and Under Another Element ">
    <div class="grid">
      <div></div>
      <div data-white></div>
      <div data-white></div>
      <div></div>
    </div>
  </div>
  <div class="blend2">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg" class="lazy" alt="Weaving One Element Over and Under Another Element ">
    <div class="grid2">
      <div data-white></div>
      <div></div>
      <div></div>
      <div data-white></div>
    </div>
  </div>
</div>

The CSS for the blend and grid:

.blend, .blend2 {
  position: absolute;
  height: 100%;
  width: 100%;
  mix-blend-mode: multiply;
}

.grid, .grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  position: absolute;
  height: 100%;
  width: 100%;
}

[data-white] {
  background-color: white;
}

The mix-blend-mode: multiply; creates the transparency effect. The grid positions the white boxes strategically to mask the unwanted parts of the rotated frame. A second grid and image (blend2) are added to restore the white in the desired areas.

This layering and blend mode combination produces the weaving effect. While CSS masking could be an alternative, blend modes offer better browser compatibility and simpler implementation using grid. The choice of grid for quadrant creation is for convenience; flexbox or other methods could also be used. The data-white attribute is a stylistic choice for cleaner HTML. Other blend modes like screen, darken, or lighten could also achieve similar results with adjustments to the grid cell colors.

The above is the detailed content of Weaving One Element Over and Under Another Element. For more information, please follow other related articles on the PHP Chinese website!