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