10 วิธีซ่อนเอลิเมนต์ด้วย CSS

พิจารณาจากมุมมองของความเข้ากันได้ การเข้าถึง การเปลี่ยนแปลงเลย์เอาต์ แอนิเมชัน การจัดการอีเวนต์ และประสิทธิภาพ

1. opacity, filter:opacity()

2. อัลฟาของ color

3. transform

4. clip-path

5. visibility

6. display

7. hidden

8. position

9. โอเวอร์เลย์ ::after

10. ลด width, height

[xguru]

ปกติผมใช้ display:none เป็นส่วนใหญ่ เลยคิดว่าจำเป็นต้องทำถึงขนาดนี้เลยเหรอ

แต่ส่วนที่ซ่อนไว้โดยยังคงเลย์เอาต์เดิมเอาไว้ได้ก็ดูน่าสนใจดีครับ

มองแบบนั้นแล้ว วิธีที่ 5 หรือ 3 ที่รองรับการใช้งานได้ดีก็ดูน่าจะเอาไปใช้ได้หลากหลายเหมือนกัน