CSS Trick ตัวอย่างเว็บไซต์ใช้ CSS สุดเจ๋ง

, , Leave a comment

เมื่อวานเปิดดู WordCamp TV ของ Sara Cannon พูดเรื่อง CSS Trick ตอนแรกเห็นเธอน่ารักสดใสเลยขอดูนิดหนึ่ง แต่สุดท้ายดูจบก็ได้อะไรมาเหมือนกัน มีตัวอย่าง Showcase ของ CSS ที่เธอเอามาโชว์ประกอบการนำเสนอ พบว่ามันเจ๋งดี เลยคัดเอาส่วนที่น่าสนใจมาบันทึกเก็บไว้

อันแรกเป็นการออกแบบเกี่ยวกับ Scrolling  ลิงค์เว็บไซต์ https://lostworldsfairs.com/atlantis ทดลองเลื่อนหน้าเว็บไซต์ลงไปข้างล่างเรื่อยๆ จะพบว่าคนในท่อจะวิ่งตามลงไปด้วย ระดับความลึกก็เปลี่ยนตาม

Atlantis

เว็บที่สองเป็นการโชว์ความสามารถการใส่พื้นหลังหลายภาพ (ซ้อนกัน) เว็บเหล่านี้จะพบว่าพื้นหลังของเว็บมันมีความน่าสนใจมากขึ้นเยอะเลย ตัวอย่าง https://silverbackapp.com มีพื้นหลังอยู่ถึง 4 ภาพ ย่อขยายหน้าเว็บจะเห็นว่ามีเลเยอร์ของ ด้านหลังซ้อนกันอยู่

https://silverbackapp.com

และอีกตัวที่ผมเห็นแล้ว พบว่ามันเท่มากคือ เว็บ https://www.nikebetterworld.com ลอง Scrolling ลงไปข้างล่างจะเห็นการนำเสนอที่เจ๋งจริงๆ พื้นหลังจะเปลี่ยนไปเรื่อยๆ

https://www.nikebetterworld.com/

และส่วนที่น่าสนใจที่สุดคือ เป็นความสามารถของการใช้ CSS Grids ควบคุมการแสดงผลแตกต่างกัน ตามขนาดของหน้าจอ เช่นหน้าจอของ PC, iPad, Mobile ขนาด ตำแหน่งของเมนู เปลี่ยนแปลงตามขนาดของหน้าจอที่เรียกใช้งาน ลองเปิดดูที่ https://hicksdesign.co.uk/ และ https://colly.com แล้วลองย่อขนาดของเว็บไซต์ดูครับ

hicksdesign.co.uk ขนาดจอ PC
https://hicksdesign.co.uk ขนาดจอมือถิอ
https://colly.com แสดงหน้าจอ PC
https://colly.com แสดงหน้าจอมือถือ

ยังมี resource และเว็บไซต์ที่น่าสนใจอื่นๆอีก ตามดูการนำเสนอของ Sara Cannon ในหัวข้อ CSS Tricks ได้ที่ https://WordPress.tv ความยาวประมาณ 34 นาที ครับ

 

Leave a Reply