ป้ายกำกับ: showcase

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

เมื่อวานเปิดดู 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 นาที ครับ

เว็ปค่ายเยาวชนรู้งานสืบสานพระราชดำริ รุ่นที่ 1

เว็ปค่ายเยาวชนรู้งานสืบสานพระราชดำริ รุ่นที่ 1

เว็ปค่ายเยาวชนรู้งาน สืบสานพระราชดำริ รุ่นที่ 1 ของสำนักงาน กปร.

ไปช่วยเขาทำเว็บที่ให้รายละเอียดเกี่ยวกับโครงการค่ายเยาวชนรู้งานสืบสานพระราชดำริ วิธีการสมัคร มีการประกวด และให้รางวัลด้วย ใครสนใจก็เข้าไปดูได้

เว็บใช้เวลาทำไม่นานมากนัก ส่วนเนื่อหาให้เขาไปปรับแก้ไข และใส่เพิ่มเติมเอง ยังย้ายไปอยู่บน server ของ กปร. ไม่ได้เพราะ server ไม่รองรับ (เขาใช้ aspx) ต้องไป set up เองยังทำไม่สำเร็จ ตอนนี้มันเลยต้องรันอยู่บน subdomain ของบล็อกนี้ คือ https://camp.amphur.in.th หรือถ้าเข้าไปที่หน้าหลักของ https://www.rdpb.go.th/rdpb ยังแก้ปัญหาด้วยการลิงค์มาที่นี้

รายละเอียดของเว็ป

  • แน่นอนมันเป็น WordPress
  • ใช้ธีมของ Academica เป็นธีมฟรีที่เยี่ยมมาก เป็นธีมที่มี slide show มาในตัว และทำระบบเมนูมาดี จนทำให้เข้าใจระบบของ custom menu มากขึ้นว่ามันทำให้การจัดการเรื่องของเมนูง่ายขึ้นมาก และธีมรองรับ image background (WP3.0) มีปรับ CSS นิดหน่อย
  • เพิ่ม Social Plugin ของ Facebook เข้ามาด้วย
  • ใช้ Plugin ที่ชื่อ Mingle Forum ทำเว็บบอร์ด ง่ายและถูกใจ ปรับแต่งได้สะดวก
  • Fancybox ทำให้เวลาคลิกอัลบั้มรูปมันดูดีไฮโซขึ้นอีกเยอะเลย
  • Login-box เวลาคลิกล็อกอินจะแสดงกล่องขึ้นมากรอกเพื่อล็อกอิน ไม่ต้องโหลดหน้าใหม่
  • รูปที่อยู่ข้างในตัดต่อด้วย Pixlr เคยแนะนำไว้แล้วที่ Online Image Editor แต่งภาพออนไลน์ ไม่ต้องลงโปรแกรม ถือว่าใช้ในการทำงานจริงได้สบาย ไม่ต้องง้อ Photoshop

มาบันทึกเก็บไว้เผื่อครั้งหน้าอาจได้ย้อนมาดูว่าทำยังไงบ้าง

Exit mobile version