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

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

Adam Argyle

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

หากต้องการดูวิดีโอ โปรดดูโพสต์นี้ใน YouTube

ภาพรวม

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

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 Grid เพราะดูเหมือนจะเหมาะสมกับรูปแบบการนำเสนอแบบแถว และยังมีฟีเจอร์ 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;
}

บทสรุป

ตอนนี้คุณรู้วิธีที่ฉันทำแล้ว คุณจะทำอย่างไร 🙂 Floats? Flexbox การไล่ระดับสี

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

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

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