การสำรวจสนุกๆ เกี่ยวกับวิธีสร้างภาพลวงตาด้วย CSS
ในโพสต์นี้เราจะพูดถึงความสนุกสนานเล็กๆ น้อยๆ! ต้องมี 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 ใช่ไหม ไล่ระดับสี?!
มาลองเปลี่ยนแนวทางของเราและเรียนรู้วิธีทั้งหมดเพื่อสร้างเว็บกันเถอะ
สร้างเดโม ลิงก์ทวีตฉัน แล้วฉันจะเพิ่มลงในส่วนรีมิกซ์ของชุมชนด้านล่าง
รีมิกซ์ของชุมชน
- ทำเครื่องหมายรองเท้าบูทด้วยการไล่ระดับสี: การสาธิตและโค้ด