CSS Grid and Custom Shapes, Part 3

This article continues the exploration of creating visually striking image galleries using CSS Grid, clipping, and masking techniques. Building on previous installments, we'll delve into more intricate shape designs. As before, the focus remains on achieving complex layouts with minimal HTML.

CSS Grid and Custom Shapes Series Recap

• Part 1
• Part 2
• Part 3 (Current Article)

Prior Article Reading: While not strictly necessary, prior articles are highly recommended to grasp the full range of techniques. However, each article can be understood independently.

Let's begin with our first example.

Die-Cut Photo Gallery

The HTML remains simple:

<div class="gallery">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 ">
</div>

The core challenge is to leverage CSS to create the visual design. The CSS uses a square grid with three columns, strategically positioning images to create overlaps:

.gallery {
  --g: 6px; /* Gap between images */

  display: grid;
  width: 450px;
  aspect-ratio: 1; /* Square grid */
  grid: auto-flow 1fr / repeat(3, 1fr);
  gap: var(--g);
}
.gallery img:nth-child(2) {
  grid-area: 1 / 2 / span 2 / span 2;
}
.gallery img:nth-child(3) {
  grid-area: 2 / 1 / span 2 / span 2;
}

The grid shorthand property efficiently defines the grid layout. The second and third images are explicitly positioned, allowing the others to auto-place. clip-path is then used to create the die-cut effect on the overlapping images:

.gallery img:nth-child(2) {
  /* ... other styles ... */
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + var(--g) / 4) 100%, 0 calc(50% - var(--g) / 4));
}
.gallery img:nth-child(3) {
  /* ... other styles ... */
  clip-path: polygon(0 0, calc(50% - var(--g) / 4) 0, 100% calc(50% + var(--g) / 4), 100% 100%, 0 100%);
}

A grayscale hover effect enhances the visual appeal.

Split Image Reveal

This example demonstrates an image reveal effect on hover. Two overlapping images are used:

.gallery {
  display: grid;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 350px;
  aspect-ratio: 1;
}

The clip-path animation creates the reveal effect. Three states are defined: no hover, hover on the first image, and hover on the second image. The clip-path uses three-point polygons, leveraging the concept of "overflowing" shapes to simplify the CSS. A transition is applied to smoothly animate the clip-path changes on hover.

Pie Image Reveal

This example extends the reveal effect to four images arranged in a pie-like layout. The clip-path animation creates the illusion of a quarter-circle expanding into a full circle on hover. The effect is achieved through carefully crafted seven-point polygons and rapid animation.

Mosaic of Images

This section explores creating a mosaic effect from multiple overlapping images. The grid layout is carefully determined by analyzing the image arrangement, resulting in a 2x4 grid. clip-path is used to shape individual images to fit the mosaic.

Complex Mosaic of Images

This final example showcases a more complex, asymmetrical mosaic. The process of determining the grid layout and clip-path values is detailed, demonstrating a systematic approach to creating intricate designs. Optimization techniques are employed to reduce the number of clip-path declarations.

Conclusion

This series showcases the power of CSS Grid and clip-path for creating sophisticated image gallery layouts with minimal HTML. The examples demonstrate various techniques and approaches, encouraging readers to experiment and create their own unique designs. The article concludes with a challenge for readers to create their own mosaics using the techniques learned.

The above is the detailed content of CSS Grid and Custom Shapes, Part 3. For more information, please follow other related articles on the PHP Chinese website!