การสร้างภาพลวงตาที่บิดเบี้ยว

การสํารวจวิธีสร้างภาพลวงตาด้วย CSS อย่างสนุกสนาน

Adam Argyle

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

หากต้องการดูวิดีโอ คุณสามารถใช้โพสต์นี้ในเวอร์ชัน YouTube:

ภาพรวม

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

Markup

โค้ด HTML ของรูปแบบนี้คือแถวและคอลัมน์ <body> คือคอนเทนเนอร์ที่มี <div class="row"> สำหรับเด็ก แต่ละแถวจะมีองค์ประกอบ <div class="square"> 5 รายการ

<div class="row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
…

รูปแบบ

ผมเลือกตารางกริด CSS เนื่องจากดูเหมาะสมแล้วกับรูปแบบการนำเสนอที่มีแถวแนวนอน และยังมี justify-content ซึ่งดูเหมือนจะเป็นวิธีที่ดีในออฟเซ็ตเด็กแถว

รูปแบบตัวถัง

เริ่มจากรูปแบบเนื้อหา เราใช้ display: grid และ grid-auto-rows เพื่อระบุเลย์เอาต์แถว calc() ที่คุณเห็นสำหรับขนาดแถวจะพิจารณาเส้นขอบของแต่ละแถว และช่วยให้เอฟเฟกต์พอดีกับวิวพอร์ตแบบเต็ม

body {
  display: grid;
  grid-auto-rows: calc(20vh - 4px);
  gap: 4px;
  background: gray;
  margin: 0;
}

รูปแบบแถว

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

.row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 9vw;
  padding-inline: 4vw;
  gap: 10vw;
  background: white;
}

.row:nth-child(even) {
  justify-content: center;
}

.row:nth-child(3n) {
  justify-content: end;
}

รูปแบบสี่เหลี่ยมจัตุรัส

ตอนนี้เหลือแค่เปลี่ยนสีสี่เหลี่ยมจัตุรัสและเพิ่มเส้นขอบ

.square {
  border-inline: 4px solid gray;
  background: black;
}

บทสรุป

ตอนนี้คุณก็รู้วิธีที่เราทําแล้ว คุณจะทําอย่างไร 🙂 ลอยได้ไหม Flexbox ใช่ไหม ไล่ระดับสี

มาลองใช้แนวทางที่หลากหลายและดูวิธีทั้งหมดในการสร้างบนเว็บกัน

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

รีมิกซ์ของชุมชน