Grid CSS dan bentuk tersuai, Bahagian 3

Artikel ini meneruskan penjelajahan mewujudkan galeri imej yang menarik secara visual menggunakan grid CSS, keratan, dan teknik pelekat. Membina pada ansuran sebelumnya, kami akan menyelidiki reka bentuk bentuk yang lebih rumit. Seperti dahulu, tumpuan kekal untuk mencapai susun atur kompleks dengan HTML yang minimum.

Grid CSS dan Rekap Siri Bentuk Custom

Bahagian 1
• Bahagian 2
bahagian 3 (artikel semasa)
Bacaan artikel terdahulu:

Walaupun tidak diperlukan dengan ketat, artikel terdahulu sangat disyorkan untuk memahami pelbagai teknik. Walau bagaimanapun, setiap artikel dapat difahami secara bebas.

mari kita mulakan dengan contoh pertama kami.

Galeri Foto Die-Cut

HTML tetap mudah:

Cabaran utama adalah untuk memanfaatkan CSS untuk membuat reka bentuk visual. CSS menggunakan grid persegi dengan tiga lajur, imej kedudukan strategik untuk membuat pertindihan:

<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>

harta swasta dengan cekap mentakrifkan susun atur grid. Imej kedua dan ketiga diposisikan secara eksplisit, membolehkan yang lain berada di tempat auto.

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

kemudian digunakan untuk membuat kesan mati pada imej yang bertindih:

grid clip-path Kesan hover kelabu meningkatkan daya tarikan visual.

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

Imej split mendedahkan

Contoh ini menunjukkan imej mendedahkan kesan pada hover. Dua imej bertindih digunakan:

Animasi

mencipta kesan mendedahkan. Tiga negeri ditakrifkan: tiada hover, hover pada imej pertama, dan hover pada imej kedua. The

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

menggunakan poligon tiga titik, memanfaatkan konsep bentuk "melimpah" untuk mempermudah CSS. Peralihan digunakan untuk menghidupkan dengan lancar perubahan

pada hover. clip-path clip-path imej pie mendedahkan clip-path

Contoh ini memanjangkan kesan mendedahkan kepada empat imej yang diatur dalam susun atur seperti pai. Animasi

mencipta ilusi bulatan seperempat berkembang menjadi bulatan penuh pada hover. Kesannya dicapai melalui poligon tujuh mata yang dibuat dengan teliti dan animasi pesat.

MOSAIC OF IMAGE clip-path

Bahagian ini meneroka mewujudkan kesan mozek dari pelbagai imej bertindih. Susun atur grid ditentukan dengan teliti dengan menganalisis susunan imej, menghasilkan grid 2x4.

digunakan untuk membentuk imej individu agar sesuai dengan mozek.

Mosaik Kompleks Imej clip-path

Contoh akhir ini mempamerkan mozek yang lebih kompleks dan asimetri. Proses menentukan susun atur grid dan

nilai terperinci, menunjukkan pendekatan sistematik untuk mewujudkan reka bentuk yang rumit. Teknik pengoptimuman digunakan untuk mengurangkan bilangan pengisytiharan

.

Kesimpulan

Siri ini mempamerkan kuasa grid CSS dan clip-path untuk membuat susun atur galeri imej yang canggih dengan HTML yang minimum. Contohnya menunjukkan pelbagai teknik dan pendekatan, menggalakkan pembaca untuk bereksperimen dan membuat reka bentuk unik mereka sendiri. Artikel ini menyimpulkan dengan cabaran bagi pembaca untuk membuat mosaik mereka sendiri menggunakan teknik yang dipelajari.

Atas ialah kandungan terperinci Grid CSS dan bentuk tersuai, Bahagian 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!