CSS Grid และ Custom Shapes ตอนที่ 2

เอาล่ะดังนั้น ครั้งล่าสุดที่เราเช็คอินเราใช้ CSS Grid และรวมเข้ากับ CSS clip-path และ mask เทคนิคการสร้างเส้นกริดให้สวยงาม

นี่เป็นเพียงหนึ่งในกริดที่ยอดเยี่ยมที่เราทำร่วมกัน:

พร้อมสำหรับรอบที่สอง? เรายังคงทำงานกับ CSS Grid clip-pathและ maskแต่ในตอนท้ายของบทความนี้ เราจะลงเอยด้วยวิธีการต่างๆ ในการจัดเรียงรูปภาพบนตาราง ซึ่งรวมถึงเอฟเฟกต์ rad hover ที่สร้างประสบการณ์การรับชมแบบโต้ตอบได้อย่างแท้จริง

และคาดเดาอะไร? เรากำลังใช้ มาร์กอัปแบบเดียวกับที่เราใช้ครั้งที่แล้ว. นี่คืออีกครั้ง:

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <!-- as many times as we want -->
</div>

เช่นเดียวกับบทความก่อนหน้านี้ เราต้องการคอนเทนเนอร์ที่มีรูปภาพอยู่ภายในเท่านั้น ไม่มีอะไรมาก!

ตารางภาพที่ซ้อนกัน

คราวที่แล้ว เส้นตารางของเราเป็นเส้นตารางรูปภาพทั่วไป นอกเหนือจากรูปร่างที่เรียบร้อยที่เราปกปิดไว้ พวกมันยังเป็นเส้นตารางสมมาตรมาตรฐานเท่าที่เราวางตำแหน่งภาพไว้ข้างใน

มาลองซ้อนรูปภาพที่กึ่งกลางตารางกัน:

เราเริ่มต้นด้วยการตั้งค่าตาราง2✕2สำหรับสี่ภาพ:

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px; /* controls the gap between images */

  display: grid;
  gap: var(--g);
  grid-template-columns: repeat(2, auto);
}
.gallery > img {
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
}

ยังไม่มีอะไรซับซ้อน ขั้นตอนต่อไปคือการตัดมุมของรูปภาพเพื่อสร้างพื้นที่สำหรับรูปภาพที่ซ้อนกัน ฉันมีบทความโดยละเอียดเกี่ยวกับ .แล้ว วิธีการตัดมุมโดยใช้ clip-path และ mask. คุณสามารถใช้ my เครื่องกำเนิดไฟฟ้าออนไลน์ เพื่อรับ CSS สำหรับปิดบังมุม

สิ่งที่เราต้องการคือการตัดมุมออกเป็นมุมเท่ากับ 90deg. เราก็ใช้ได้เหมือนกัน เทคนิค conic-gradient จากบทความนั้นให้ทำอย่างนั้น:

.gallery > img {
   mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) { --_a: 90deg; }
.gallery > img:nth-child(2) { --_a: 180deg; }
.gallery > img:nth-child(3) { --_a: 0deg; }
.gallery > img:nth-child(4) { --_a:-90deg; }

เราสามารถใช้ clip-path วิธีการตัดมุมจากบทความเดียวกันนั้น แต่การมาสก์ด้วยการไล่ระดับสีจะเหมาะกว่าที่นี่ เพราะเรามีการกำหนดค่าเดียวกันสำหรับรูปภาพทั้งหมด — ทั้งหมดที่เราต้องการคือการหมุน (กำหนดด้วยตัวแปร --_a) รับเอฟเฟกต์ ดังนั้นเราจึงปิดบังจากด้านในแทนที่จะเป็นขอบด้านนอก

ตอนนี้เราสามารถวางภาพที่ซ้อนกันไว้ในพื้นที่ที่ปิดบังได้ อันดับแรก ตรวจสอบให้แน่ใจว่าเรามีองค์ประกอบภาพที่ห้าใน HTML:

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
</div>

เราจะใช้ตำแหน่งที่แน่นอนที่ดีเพื่อวางไว้ในนั้น:

.gallery > img:nth-child(5) {
  position: absolute;
  inset: calc(50% - .5*var(--s));
  clip-path: inset(calc(var(--g) / 4));
}

พื้นที่ inset คุณสมบัติช่วยให้เราสามารถวางภาพไว้ที่กึ่งกลางโดยใช้การประกาศเพียงครั้งเดียว เราทราบขนาดของภาพ (กำหนดด้วยตัวแปร --s) และเรารู้ว่าขนาดของคอนเทนเนอร์เท่ากับ 100% เราทำคณิตศาสตร์และระยะห่างจากแต่ละขอบควรเท่ากับ (100% - var(--s))/2.

คุณอาจสงสัยว่าทำไมเราถึงใช้ clip-path เลยที่นี่ เรากำลังใช้มันกับภาพที่ซ้อนกันเพื่อให้มีช่องว่างที่สอดคล้องกัน หากเราจะลบออก คุณจะสังเกตเห็นว่าเราไม่มีช่องว่างเหมือนกันระหว่างรูปภาพทั้งหมด ด้วยวิธีนี้ เราจะตัดเล็กน้อยจากภาพที่ห้าเพื่อให้ได้ระยะห่างที่เหมาะสมรอบๆ

รหัสที่สมบูรณ์อีกครั้ง:

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px;  /* controls the gap between images */
  
  display: grid;
  gap: var(--g);
  grid-template-columns: repeat(2, auto);
  position: relative;
}

.gallery > img {
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}

.gallery > img:nth-child(1) {--_a: 90deg}
.gallery > img:nth-child(2) {--_a:180deg}
.gallery > img:nth-child(3) {--_a:  0deg}
.gallery > img:nth-child(4) {--_a:-90deg}
.gallery > img:nth-child(5) {
  position: absolute;
  inset: calc(50% - .5*var(--s));
  clip-path: inset(calc(var(--g) / 4));
}

ตอนนี้ พวกคุณหลายคนอาจยังสงสัยว่าทำไมถึงซับซ้อนไปหมด ในเมื่อเราสามารถวางภาพสุดท้ายไว้ด้านบนและเพิ่มเส้นขอบให้กับรูปภาพนั้นได้ ที่จะซ่อนภาพภายใต้ภาพที่ซ้อนกันโดยไม่มีหน้ากากใช่ไหม

นั่นเป็นความจริง และเราจะได้รับสิ่งต่อไปนี้:

ไม่ maskที่ clip-path. ใช่ โค้ดนี้เข้าใจง่าย แต่มีข้อเสียอยู่เล็กน้อยคือ สีเส้นขอบต้องเหมือนกับพื้นหลังหลักเพื่อทำให้ภาพลวงตาสมบูรณ์แบบ ข้อเสียเล็ก ๆ น้อย ๆ นี้ก็เพียงพอแล้วสำหรับฉันที่จะทำให้โค้ดซับซ้อนขึ้นเพื่อแลกกับความโปร่งใสที่แท้จริงโดยไม่ขึ้นกับพื้นหลัง ฉันไม่ได้บอกว่าการเข้าใกล้ชายแดนนั้นไม่ดีหรือผิด ฉันจะแนะนำในกรณีส่วนใหญ่ที่ทราบพื้นหลัง แต่เรามาที่นี่เพื่อสำรวจสิ่งใหม่ๆ และที่สำคัญที่สุดคือ การสร้างส่วนประกอบที่ไม่ขึ้นอยู่กับสภาพแวดล้อม

คราวนี้มาลองรูปร่างอื่นกัน:

คราวนี้ เราสร้างภาพที่ซ้อนกันเป็นวงกลมแทนที่จะเป็นสี่เหลี่ยมจัตุรัส นั่นเป็นเรื่องง่ายด้วย border-radius แต่เราต้องใช้ a คัตเอาท์แบบวงกลม สำหรับภาพอื่นๆ คราวนี้แม้ว่าเราจะพึ่งพา a radial-gradient() แทน a conic-gradient() เพื่อให้ได้รูปลักษณ์ที่โค้งมน

.gallery > img {
  mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2), #000 calc(51% + var(--g)/2));
}
.gallery > img:nth-child(1) { --_a: calc(100% + var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(2) { --_a: calc(0%   - var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(3) { --_a: calc(100% + var(--g)/2) calc(0%   - var(--g)/2); }
.gallery > img:nth-child(4) { --_a: calc(0%   - var(--g)/2) calc(0%   - var(--g)/2); }

รูปภาพทั้งหมดใช้การกำหนดค่าเดียวกันกับตัวอย่างก่อนหน้านี้ แต่เราอัปเดตจุดศูนย์กลางในแต่ละครั้ง

รูปด้านบนแสดงจุดศูนย์กลางของแต่ละวงกลม ในโค้ดจริง คุณจะสังเกตเห็นว่าฉันกำลังพิจารณาช่องว่างด้วยเพื่อให้แน่ใจว่าจุดทั้งหมดอยู่ที่ตำแหน่งเดียวกัน (ศูนย์กลางของกริด) เพื่อให้ได้วงกลมที่ต่อเนื่องกันหากเรารวมเข้าด้วยกัน

ตอนนี้เรามีเลย์เอาต์แล้ว มาพูดถึงเอฟเฟกต์โฮเวอร์กัน ในกรณีที่คุณไม่ได้สังเกต เอฟเฟกต์โฮเวอร์เจ๋งๆ จะเพิ่มขนาดของภาพที่ซ้อนกันและปรับอย่างอื่นตามนั้น การเพิ่มขนาดเป็นงานที่ค่อนข้างง่าย แต่การอัปเดตการไล่ระดับสีนั้นซับซ้อนกว่า เนื่องจากตามค่าเริ่มต้น การไล่ระดับสีจะไม่สามารถเคลื่อนไหวได้ เพื่อเอาชนะสิ่งนี้ ฉันจะใช้ a font-size แฮ็คเพื่อให้สามารถเคลื่อนไหวการไล่ระดับสีในแนวรัศมี

หากคุณตรวจสอบรหัสของการไล่ระดับสีคุณจะเห็นว่าฉันกำลังเพิ่ม 1em:

mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));

เป็นที่ทราบกันดีว่า em หน่วยสัมพันธ์กับองค์ประกอบหลักของ font-sizeดังนั้นการเปลี่ยน font-size ของ .gallery ก็จะเปลี่ยนการคำนวณ em ค่า — นี่คือเคล็ดลับที่เราใช้ เรากำลังเคลื่อนไหว font-size จากค่าของ 0 ตามค่าที่กำหนดและด้วยเหตุนี้ การไล่ระดับสีจึงเป็นแบบเคลื่อนไหว ทำให้ส่วนที่ตัดออกมีขนาดใหญ่ขึ้น ตามขนาดของภาพที่ซ้อนกันซึ่งขยายใหญ่ขึ้น

นี่คือรหัสที่เน้นส่วนที่เกี่ยวข้องกับเอฟเฟกต์โฮเวอร์:

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px; /* controls the gaps between images */

  font-size: 0; /* initially we have 1em = 0 */
  transition: .5s;
}
/* we increase the cut-out by 1em */
.gallery > img {
  mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));
}
/* we increase the size by 2em */
.gallery > img:nth-child(5) {
  width: calc(var(--s) + 2em);
}
/* on hover 1em = S/5 */
.gallery:hover {
  font-size: calc(var(--s) / 5);
}

พื้นที่ font-size เคล็ดลับจะมีประโยชน์หากเราต้องการทำให้การไล่ระดับสีเคลื่อนไหวหรือคุณสมบัติอื่นๆ ที่ไม่สามารถเคลื่อนไหวได้ คุณสมบัติที่กำหนดเองที่กำหนดด้วย @property สามารถแก้ปัญหาดังกล่าวได้ แต่ สนับสนุนมัน ยังขาดอยู่ในขณะที่เขียน

ฉันค้นพบ font-size เคล็ดลับจาก @SelenIT2 ในขณะที่พยายามแก้ ความท้าทายบน Twitter.

รูปร่างอื่น? ไปกันเถอะ!

คราวนี้เราตัดภาพที่ซ้อนกันเป็นรูปสี่เหลี่ยมขนมเปียกปูน ฉันจะให้คุณผ่ารหัสเป็นแบบฝึกหัดเพื่อดูว่าเรามาที่นี่ได้อย่างไร คุณจะสังเกตเห็นว่าโครงสร้างเหมือนกับในตัวอย่างของเรา ความแตกต่างเพียงอย่างเดียวคือวิธีที่เราใช้การไล่ระดับสีเพื่อสร้างรูปร่าง เจาะลึกและเรียนรู้!

ตารางภาพวงกลม

เราสามารถรวมสิ่งที่เราได้เรียนรู้ที่นี่และในบทความก่อนหน้านี้เพื่อสร้างตารางภาพที่น่าตื่นเต้นยิ่งขึ้น คราวนี้ มาทำให้รูปภาพทั้งหมดในตารางของเราเป็นวงกลม และเมื่อวางเมาส์เหนือ ให้ขยายรูปภาพเพื่อแสดงสิ่งทั้งหมดโดยครอบคลุมรูปภาพที่เหลือ

โครงสร้าง HTML และ CSS ของกริดนั้นไม่มีอะไรใหม่จากเมื่อก่อน ดังนั้นให้ข้ามส่วนนั้นและโฟกัสไปที่รูปร่างทรงกลมและเอฟเฟกต์โฮเวอร์ที่เราต้องการแทน

เรากำลังจะใช้ clip-path และมัน circle() ฟังก์ชั่นเพื่อ — คุณเดาได้! — ตัดวงกลมออกจากภาพ

ตัวเลขนั้นแสดงให้เห็นถึง clip-path ใช้สำหรับภาพแรก ด้านซ้ายแสดงสถานะเริ่มต้นของรูปภาพ ในขณะที่ด้านขวาแสดงสถานะที่โฮเวอร์ คุณสามารถใช้ได้ เครื่องมือออนไลน์นี้ เพื่อเล่นและเห็นภาพ clip-path ค่า

สำหรับภาพอื่นๆ เราสามารถอัพเดทจุดศูนย์กลางของวงกลมได้ (70% 70%) เพื่อรับรหัสต่อไปนี้:

.gallery > img:hover {
  --_c: 50%; /* same as "50% at 50% 50%" */
}
.gallery > img:nth-child(1) {
  clip-path: circle(var(--_c, 55% at 70% 70%));
}
.gallery > img:nth-child(2) {
  clip-path: circle(var(--_c, 55% at 30% 70%));
}
.gallery > img:nth-child(3) {
  clip-path: circle(var(--_c, 55% at 70% 30%));
}
.gallery > img:nth-child(4) {
  clip-path: circle(var(--_c, 55% at 30% 30%));
}

สังเกตว่าเรากำลังกำหนด clip-path ค่าเป็นตัวสำรองภายใน var(). วิธีนี้ช่วยให้เราอัปเดตค่าบนโฮเวอร์ได้ง่ายขึ้นโดยการตั้งค่าของ --_c ตัวแปร. เมื่อใช้ circle()ตำแหน่งเริ่มต้นของจุดศูนย์กลางคือ 50% 50%ดังนั้นเราจึงไม่ต้องใส่โค้ดที่กระชับกว่านี้ นั่นเป็นเหตุผลที่คุณเห็นว่าเราเป็นเพียงการตั้งค่า 50% แทน 50% at 50% 50%.

จากนั้นเราเพิ่มขนาดของภาพเมื่อวางเมาส์เหนือขนาดโดยรวมของตารางเพื่อให้ครอบคลุมภาพอื่นๆ ได้ นอกจากนี้เรายังมั่นใจว่า z-index มีค่าที่สูงกว่าบนภาพที่โฮเวอร์ ดังนั้นมันจึงเป็นอันบนสุดของเรา ซ้อนบริบท.

.gallery {
  --s: 200px; /* controls the image size */
  --g: 8px;   /* controls the gap between images */

  display: grid;
  grid: auto-flow var(--s) / repeat(2, var(--s));
  gap: var(--g);
}

.gallery > img {
  width: 100%; 
  aspect-ratio: 1;
  cursor: pointer;
  z-index: 0;
  transition: .25s, z-index 0s .25s;
}
.gallery > img:hover {
  --_c: 50%; /* change the center point on hover */
  width: calc(200% + var(--g));
  z-index: 1;
  transition: .4s, z-index 0s;
}

.gallery > img:nth-child(1){
  clip-path: circle(var(--_c, 55% at 70% 70%));
  place-self: start;
}
.gallery > img:nth-child(2){
  clip-path: circle(var(--_c, 55% at 30% 70%));
  place-self: start end;
}
.gallery > img:nth-child(3){
  clip-path: circle(var(--_c, 55% at 70% 30%));
  place-self: end start;
}
.gallery > img:nth-child(4){
  clip-path: circle(var(--_c, 55% at 30% 30%));
  place-self: end;
}

เกิดอะไรขึ้นกับ place-self คุณสมบัติ? ทำไมเราถึงต้องการมัน และทำไมแต่ละภาพถึงมีค่าเฉพาะ?

คุณจำปัญหาที่เรามีในบทความก่อนหน้านี้เมื่อ การสร้างตารางของชิ้นส่วนปริศนา? เราเพิ่มขนาดของรูปภาพเพื่อสร้างโอเวอร์โฟลว์ แต่รูปภาพบางรูปโอเวอร์โฟลว์ไม่ถูกต้อง เราแก้ไขโดยใช้ place-self คุณสมบัติ

ปัญหาเดียวกันที่นี่ เรากำลังเพิ่มขนาดของรูปภาพเพื่อให้แต่ละภาพล้นเซลล์กริด แต่ถ้าเราไม่ทำอะไรเลย พวกมันทั้งหมดจะล้นทางด้านขวาและด้านล่างของกริด สิ่งที่เราต้องการคือ:

1. ภาพแรกล้นขอบล่างขวา (ลักษณะการทำงานเริ่มต้น)
2. ภาพที่สองล้นขอบซ้ายล่าง
3. ภาพที่สามล้นขอบขวาบนและ
4. ภาพที่สี่จะล้นขอบซ้ายบน

เพื่อให้ได้สิ่งนั้น เราจำเป็นต้องวางแต่ละภาพอย่างถูกต้องโดยใช้เครื่องหมาย place-self คุณสมบัติ

ในกรณีที่คุณไม่คุ้นเคย place-self, มันเป็นชวเลขสำหรับ justify-self และ align-self เพื่อวางองค์ประกอบในแนวนอนและแนวตั้ง เมื่อต้องใช้ค่าเดียว การจัดตำแหน่งทั้งสองจะใช้ค่าเดียวกันนั้น

การขยายแผงรูปภาพ

ในบทความก่อนหน้าฉันได้สร้างเอฟเฟกต์การซูมสุดเจ๋งที่ใช้กับตารางของรูปภาพที่เราสามารถควบคุมทุกอย่างได้ ไม่ว่าจะเป็นจำนวนแถว จำนวนคอลัมน์ ขนาด ขนาด ตัวคูณมาตราส่วน ฯลฯ

กรณีพิเศษคือแผงขยายแบบคลาสสิก ซึ่งเรามีเพียงหนึ่งแถวและคอนเทนเนอร์เต็มความกว้าง

เราจะนำตัวอย่างนี้มารวมกับรูปร่าง!

ก่อนที่เราจะดำเนินการต่อ ฉันขอแนะนำให้อ่าน my บทความอื่นๆ เพื่อทำความเข้าใจว่ากลอุบายที่เรากำลังจะพูดถึงนั้นเป็นอย่างไร ลองดูแล้วเราจะดำเนินการต่อที่นี่เพื่อมุ่งเน้นไปที่การสร้างรูปร่างแผง

ขั้นแรก มาเริ่มด้วยการลดความซับซ้อนของโค้ดและลบตัวแปรบางตัวออก

เราต้องการเพียงหนึ่งแถวและจำนวนคอลัมน์ควรปรับตามจำนวนภาพ นั่นหมายความว่าเราไม่ต้องการตัวแปรสำหรับจำนวนแถวอีกต่อไป (--n) และคอลัมน์ (--m ) แต่เราต้องใช้ grid-auto-flow: columnทำให้กริดสร้างคอลัมน์โดยอัตโนมัติเมื่อเราเพิ่มรูปภาพใหม่ เราจะพิจารณาความสูงคงที่สำหรับคอนเทนเนอร์ของเรา โดยค่าเริ่มต้น จะเป็นแบบเต็มความกว้าง

มาหนีบรูปภาพให้เป็นรูปทรงเอียงกันเถอะ:

เป็นอีกครั้งที่รูปภาพแต่ละรูปอยู่ในเซลล์กริด ดังนั้นจึงมีช่องว่างระหว่างรูปภาพมากกว่าที่เราต้องการ:

เราจำเป็นต้องเพิ่มความกว้างของรูปภาพเพื่อสร้างการทับซ้อนกัน เราเปลี่ยน min-width: 100% กับ min-width: calc(100% + var(--s))ที่นี่มี --s เป็นตัวแปรใหม่ที่ควบคุมรูปร่าง

ตอนนี้เราจำเป็นต้องแก้ไขภาพแรกและภาพสุดท้าย ดังนั้นจึงทำให้หน้ากระดาษขาดโดยไม่มีช่องว่าง กล่าวอีกนัยหนึ่ง เราสามารถลบเอียงจากด้านซ้ายของภาพแรกและเอียงออกจากด้านขวาของภาพสุดท้าย เราต้องการใหม่ clip-path สำหรับสองภาพนี้โดยเฉพาะ

เราต้องแก้ไขน้ำล้นด้วย ตามค่าเริ่มต้น รูปภาพทั้งหมดจะล้นทั้งสองด้าน แต่สำหรับภาพแรก เราจำเป็นต้องมีโอเวอร์โฟลว์ทางด้านขวา ในขณะที่เราต้องการโอเวอร์โฟลว์ด้านซ้ายสำหรับภาพสุดท้าย

.gallery > img:first-child {
  min-width: calc(100% + var(--s)/2);
  place-self: start;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
  min-width: calc(100% + var(--s)/2);
  place-self: end;
  clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}

ผลลัพธ์สุดท้ายคือแผงภาพเอียงที่ขยายออกอย่างสวยงาม!

เราสามารถเพิ่มรูปภาพได้มากเท่าที่คุณต้องการ และเส้นตารางจะปรับโดยอัตโนมัติ นอกจากนี้ เราต้องควบคุมค่าเดียวเพื่อควบคุมรูปร่าง!

เราสามารถสร้างเลย์เอาต์เดียวกันนี้ด้วย flexbox เนื่องจากเรากำลังจัดการกับองค์ประกอบแถวเดียว ที่นี่คือ การนำไปใช้ของฉัน.

แน่นอนว่าภาพเอียงนั้นดูเท่ แต่รูปแบบซิกแซกล่ะ ฉันล้อเล่นอันนี้แล้วที่ ท้ายบทความที่แล้ว.

ที่ฉันทำอยู่นี้ก็แค่แทนที่ clip-path กับ mask…และเดาอะไร? ฉันมีบทความโดยละเอียดเกี่ยวกับ .แล้ว การสร้างรูปทรงซิกแซกนั้น — ไม่ต้องพูดถึงออนไลน์ เครื่องกำเนิดไฟฟ้าเพื่อรับรหัส. มาดูกันว่าทุกอย่างมารวมกันได้อย่างไร?

ส่วนที่ยากที่สุดคือการทำให้แน่ใจว่าซิกแซกอยู่ในแนวเดียวกัน และสำหรับสิ่งนี้ เราจำเป็นต้องเพิ่มออฟเซ็ตสำหรับทุกๆ :nth-child(odd) องค์ประกอบภาพ

.gallery > img {
  mask: 
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 
      100% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y,
    conic-gradient(from   45deg at left,  #0000, #000 1deg 89deg, #0000 90deg) 
      0%   calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y;
}
/* we add an offset to the odd elements */
.gallery > img:nth-child(odd) {
  --_p: var(--s);
}
.gallery > img:first-child {
  mask: 
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 
      0 calc(50% + var(--_p, 0%))/100% calc(2*var(--s));
}
.gallery > img:last-child {
  mask: 
    conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) 
      0 calc(50% + var(--_p, 0%)) /100% calc(2*var(--s));
}

สังเกตการใช้ --_p ตัวแปรซึ่งจะถอยกลับไปเป็น 0% แต่จะเท่ากับ --_s สำหรับภาพแปลกๆ

นี่คือตัวอย่างที่แสดงปัญหา โฮเวอร์เพื่อดูว่าออฟเซ็ตเป็นอย่างไร — กำหนดโดย --_p - กำลังแก้ไขการจัดตำแหน่ง

นอกจากนี้ ให้สังเกตว่าเราใช้มาสก์ที่แตกต่างกันสำหรับภาพแรกและภาพสุดท้ายอย่างไรดังที่เราทำในตัวอย่างก่อนหน้านี้ เราต้องการซิกแซกทางด้านขวาของภาพแรกและด้านซ้ายของภาพสุดท้ายเท่านั้น

และทำไมไม่มนด้าน? มาทำกัน!

ฉันรู้ว่าโค้ดอาจดูน่ากลัวและเข้าใจยาก แต่สิ่งที่เกิดขึ้นคือการผสมผสานของเทคนิคต่างๆ ที่เราได้กล่าวถึงในบทความนี้และบทความอื่นๆ ที่ฉันแชร์ไปแล้ว ในกรณีนี้ ฉันใช้โครงสร้างโค้ดเดียวกันกับซิกแซกและรูปร่างเอียง เปรียบเทียบกับตัวอย่างเหล่านั้น แล้วคุณจะไม่พบความแตกต่าง! นั่นเป็นกลอุบายเดียวกันใน บทความก่อนหน้าของฉันเกี่ยวกับเอฟเฟกต์การซูม. จากนั้นฉันกำลังใช้ my งานเขียนอื่นๆ และ เครื่องกำเนิดไฟฟ้าออนไลน์ของฉัน เพื่อรับโค้ดสำหรับมาสก์ที่สร้างรูปทรงโค้งมนเหล่านั้น

หากคุณจำสิ่งที่เราทำสำหรับซิกแซกได้ เราใช้มาสก์เดียวกันสำหรับรูปภาพทั้งหมด แต่ต้องเพิ่มการชดเชยให้กับรูปภาพแปลก ๆ เพื่อสร้างการทับซ้อนที่สมบูรณ์แบบ ในกรณีนี้ เราต้องการมาสก์ที่แตกต่างกันสำหรับรูปภาพที่เป็นเลขคี่

หน้ากากแรก:

mask: 
  linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
  radial-gradient(var(--s),#000 98%,#0000) 50% / calc(2*var(--s)) calc(1.8*var(--s)) space repeat;

คนที่สอง:

mask:
  radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000) 
  calc(50% - var(--s) - var(--g)) / 100% calc(1.8*var(--s))

ความพยายามอย่างเดียวที่ฉันทำที่นี่คืออัปเดตมาสก์ตัวที่สองเพื่อรวมตัวแปร gap (--g) เพื่อสร้างช่องว่างระหว่างรูปภาพ

สัมผัสสุดท้ายคือการแก้ไขภาพแรกและภาพสุดท้าย เช่นเดียวกับตัวอย่างก่อนหน้านี้ ภาพแรกต้องมีขอบด้านซ้ายตรง ในขณะที่ภาพสุดท้ายต้องการขอบด้านขวาที่ตรง

สำหรับภาพแรก เรารู้อยู่เสมอว่าต้องมีหน้ากาก ซึ่งมีดังนี้:

.gallery > img:first-child {
  mask: 
    radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}

รูปสุดท้ายขึ้นอยู่กับจำนวนองค์ประกอบ จึงสำคัญว่าองค์ประกอบนั้นคือ :nth-child(odd) or :nth-child(even).

.gallery > img:last-child:nth-child(even) {
  mask: 
    linear-gradient(to right,#0000 var(--s),#000 0),
    radial-gradient(var(--s),#000 98%,#0000) left / calc(2*var(--s)) calc(1.8*var(--s)) repeat-y
}

.gallery > img:last-child:nth-child(odd) {
  mask: 
    radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50% / 100% calc(1.8*var(--s))
}

นั่นคือทั้งหมด! เลย์เอาต์ที่แตกต่างกันสามแบบ แต่ใช้เทคนิค CSS เดียวกันในแต่ละครั้ง:

• โครงสร้างโค้ดเพื่อสร้างเอฟเฟกต์การซูม
• มาสก์หรือเส้นทางคลิปเพื่อสร้างรูปร่าง
• การกำหนดค่าแยกสำหรับองค์ประกอบแปลก ๆ ในบางกรณีเพื่อให้แน่ใจว่าเรามีการทับซ้อนกันที่สมบูรณ์แบบ
• การกำหนดค่าเฉพาะสำหรับภาพแรกและภาพสุดท้ายเพื่อให้รูปร่างอยู่เพียงด้านเดียว

และนี่คือการสาธิตครั้งใหญ่ที่รวมพวกเขาทั้งหมดเข้าด้วยกัน สิ่งที่คุณต้องมีคือเพิ่มชั้นเรียนเพื่อเปิดใช้งานเลย์เอาต์ที่คุณต้องการดู

และนี่คืออันที่มีการใช้งาน Flexbox

ตัดขึ้น

อ๊อฟ เสร็จแล้ว! ฉันรู้ว่ามีเทคนิคและตัวอย่าง CSS มากมายระหว่างบทความนี้กับบทความสุดท้าย ไม่ต้องพูดถึงกลอุบายอื่น ๆ ทั้งหมดที่ฉันได้อ้างอิงที่นี่จากบทความอื่น ๆ ที่ฉันเขียน ฉันใช้เวลาในการรวบรวมทุกอย่าง และคุณไม่จำเป็นต้องเข้าใจทุกอย่างพร้อมกัน การอ่านหนึ่งครั้งจะทำให้คุณเห็นภาพรวมที่ดีของเลย์เอาต์ทั้งหมด แต่คุณอาจต้องอ่านบทความมากกว่าหนึ่งครั้งและเน้นที่แต่ละตัวอย่างเพื่อทำความเข้าใจกลเม็ดทั้งหมด

คุณสังเกตไหมว่าเราไม่ได้แตะต้อง HTML เลย นอกจากจำนวนรูปภาพในมาร์กอัป เลย์เอาต์ทั้งหมดที่เราทำใช้โค้ด HTML เดียวกัน ซึ่งไม่ใช่รายการของรูปภาพ

ก่อนที่ฉันจะจบ ฉันจะทิ้งตัวอย่างสุดท้ายให้คุณฟัง เป็นการ "ต่อ" ระหว่างตัวละครอนิเมะสองตัวที่มีเอฟเฟกต์โฮเวอร์สุดเจ๋ง

แล้วคุณล่ะ คุณสามารถสร้างบางสิ่งบางอย่างจากสิ่งที่คุณได้เรียนรู้ได้หรือไม่? ไม่จำเป็นต้องซับซ้อน ลองจินตนาการถึงบางสิ่งที่เจ๋งหรือตลกเหมือนที่ฉันทำกับอนิเมะเรื่องนั้น อาจเป็นแบบฝึกหัดที่ดีสำหรับคุณ และเราอาจปิดท้ายด้วยคอลเล็กชันที่ยอดเยี่ยมในส่วนความคิดเห็น