Grille CSS et formes personnalisées, partie 3

Cet article poursuit l'exploration de la création de galeries d'images frappantes visuellement en utilisant la grille CSS, l'écrêtage et les techniques de masquage. S'appuyant sur les versements précédents, nous nous plongerons dans des conceptions de forme plus complexes. Comme précédemment, l'accent reste sur la réalisation de dispositions complexes avec un minimum de HTML.

CSS Grid and Custom Shapes Series Recap

• Partie 1
• Partie 2
• Partie 3 (article en cours)

lecture de l'article antérieur: Bien que cela ne soit pas strictement nécessaire, les articles antérieurs sont fortement recommandés pour saisir la gamme complète de techniques. Cependant, chaque article peut être compris indépendamment.

Commençons par notre premier exemple.

Galerie de photos de découpe

Le HTML reste simple:

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

Le défi de base est de tirer parti de CSS pour créer la conception visuelle. Le CSS utilise une grille carrée avec trois colonnes, positionnant stratégiquement les images pour créer des chevauchements:

.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;
}

La propriété grid raccourci définit efficacement la disposition de la grille. Les deuxième et troisième images sont explicitement positionnées, permettant aux autres de se dérouler automatiquement. clip-path est ensuite utilisé pour créer l'effet de coupe sur les images qui se chevauchent:

.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%);
}

Un effet de survol en niveaux de gris améliore l'attrait visuel.

Image divisée révéler

Cet exemple démontre un effet de révélation d'image sur le plan de plané. Deux images qui se chevauchent sont utilisées:

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

L'animation clip-path crée l'effet de révélation. Trois états sont définis: pas de survol, de survole sur la première image et de planer sur la deuxième image. Le clip-path utilise des polygones à trois points, tirant parti du concept de formes "débordantes" pour simplifier le CSS. Une transition est appliquée pour animer en douceur les modifications clip-path sur le plan.

Image de tarte révéler

Cet exemple étend l'effet de révélation à quatre images disposées dans une disposition en forme de tarte. L'animation clip-path crée l'illusion d'un quart de cercle s'étendant en un cercle complet sur volant. L'effet est réalisé grâce à des polygones à sept points soigneusement fabriqués et à l'animation rapide.

mosaïque d'images

Cette section explore la création d'un effet mosaïque à partir de plusieurs images qui se chevauchent. La disposition de la grille est soigneusement déterminée en analysant la disposition de l'image, résultant en une grille 2x4. clip-path est utilisé pour façonner des images individuelles pour s'adapter à la mosaïque.

Mosaïque complexe d'images

Cet exemple final présente une mosaïque plus complexe et asymétrique. Le processus de détermination de la disposition de la grille et des valeurs clip-path est détaillé, démontrant une approche systématique pour créer des conceptions complexes. Des techniques d'optimisation sont utilisées pour réduire le nombre de déclarations clip-path.

Conclusion

Cette série présente la puissance de CSS Grid et clip-path pour créer des dispositions de galerie d'images sophistiquées avec un HTML minimal. Les exemples démontrent diverses techniques et approches, encourageant les lecteurs à expérimenter et à créer leurs propres conceptions uniques. L'article se termine par un défi pour les lecteurs de créer leurs propres mosaïques en utilisant les techniques apprises.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!