โปรเจกต์ CSS Zen Garden

 (csszengarden.com)
2 คะแนน โดย GN⁺ 2025-04-28 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • CSS Zen Garden เป็นโปรเจกต์ที่แสดงให้เห็นความงดงามของงานออกแบบที่ขับเคลื่อนด้วย CSS
  • HTML จะคงเดิมเหมือนกันทั้งหมด และสามารถสัมผัสดีไซน์ที่หลากหลายได้ด้วยการเปลี่ยนเฉพาะไฟล์ CSS ภายนอก
  • ผู้เข้าร่วมสามารถแสดงพลังของเว็บดีไซน์ผ่าน CSS สร้างแรงบันดาลใจ และนำไปใช้เป็นสื่อการเรียนรู้ได้
  • ใช้ CSS 1 และ 2 เป็นหลัก และควรใช้ CSS 3 และ 4 อย่างจำกัด
  • งานออกแบบที่ส่งเข้ามาต้องแสดงผลได้อย่างสม่ำเสมอในหลายเบราว์เซอร์ และอย่างน้อยต้องทำงานได้บน IE9+ และเบราว์เซอร์รุ่นใหม่

ความสำคัญของ CSS Zen Garden

  • CSS Zen Garden เป็นโปรเจกต์ที่มีขึ้นเพื่อแสดงพลังของ CSS และสร้างแรงบันดาลใจให้กับนักออกแบบและนักพัฒนา
  • HTML จะคงเดิมเหมือนกันทั้งหมด และสามารถสัมผัสดีไซน์ที่หลากหลายได้ด้วยการเปลี่ยนเฉพาะไฟล์ CSS ภายนอก
  • โปรเจกต์นี้แสดงให้เห็นความเป็นไปได้ของ CSS และเน้นย้ำความงดงามของเว็บดีไซน์

วิธีเข้าร่วม

  • ต้องมีทักษะด้านดีไซน์ภาพที่โดดเด่นและความสามารถด้าน CSS แต่ผู้เริ่มต้นก็สามารถเริ่มต้นได้จากไฟล์ตัวอย่าง
  • สามารถปรับแก้สไตล์ชีตได้อย่างอิสระ แต่ไม่สามารถเปลี่ยน HTML ได้
  • เมื่อทำผลงานเสร็จแล้ว ต้องอัปโหลดขึ้นเว็บเซิร์ฟเวอร์และส่งลิงก์ผลงาน

ประโยชน์ของการเข้าร่วม

  • ช่วยเพิ่มการเป็นที่รู้จัก มอบแรงบันดาลใจ และสามารถใช้เป็นสื่อที่แสดงศักยภาพอันน่าทึ่งของ CSS ได้
  • เป็นเว็บไซต์ที่มอบแรงบันดาลใจให้กับเว็บดีไซเนอร์และนักพัฒนา และสามารถใช้เป็นสื่อการเรียนรู้ได้

ข้อกำหนด

  • ใช้ CSS 1 และ 2 เป็นหลัก และควรใช้ CSS 3 และ 4 อย่างจำกัด
  • ต้องแสดงผลได้อย่างสม่ำเสมอในหลายเบราว์เซอร์ และอย่างน้อยต้องทำงานได้บน IE9+ และเบราว์เซอร์รุ่นใหม่
  • ต้องส่งผลงานที่เป็นต้นฉบับและเคารพลิขสิทธิ์

ลิขสิทธิ์และไลเซนส์

  • กราฟิกที่ส่งเข้ามายังคงเป็นลิขสิทธิ์ของผู้สร้าง และ CSS ต้องเผยแพร่ภายใต้ไลเซนส์ Creative Commons
  • ควรแชร์ CSS เพื่อให้ผู้อื่นสามารถนำไปเรียนรู้ได้

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-04-28
ความคิดเห็นบน Hacker News

  • ก่อนที่ CSS จะถือกำเนิด นักพัฒนาเว็บมักใช้ element ตารางอย่างเกินความจำเป็นเพื่อสร้างกริด และทำเลย์เอาต์ด้วยการตัดภาพแล้วนำไปวางในตาราง

    • มีแรงต้านต่อ CSS และนักพัฒนาจำนวนมากปฏิเสธที่จะเรียน CSS
    • มีความเข้าใจผิดว่า CSS ทำได้แค่ดีไซน์ที่ "น่าเบื่อและเป็นกล่องๆ"
    • Dave Shea แสดงให้เห็นความเป็นไปได้ของ CSS ผ่าน CSS Zen Garden และลบล้างความเข้าใจผิดเหล่านี้
    • เขาพิสูจน์ว่า CSS สามารถสร้างดีไซน์ที่ยอดเยี่ยมได้ จนยุติข้อถกเถียงนี้ลง

  • เว็บไซต์นี้เก่าแล้ว แต่ก็ยอดเยี่ยมในความหมายที่ดี

    • ในช่วงต้นทศวรรษ 2000 มันเป็นจุดเปลี่ยนที่ทำให้หันหลังให้ Microsoft ASP.NET และไปพัฒนาแอปบน Linux
    • Alex Russell นำข้อมูลใหม่ๆ มาให้ผ่าน Dojo JS และทำให้ตระหนักถึงความสำคัญของข่าวสารสายเทคโนโลยี
    • ใช้ชุดเครื่องมือที่ประกอบด้วย Web.py, HTML, JS และ CSS และต่อมาก็มี jQuery, Backbone, Underscore, React, TS ฯลฯ ปรากฏขึ้น

  • ประเด็นสำคัญของ CSS Zen Garden คือการใช้ HTML เชิงความหมายให้ได้มากที่สุด เพื่อให้การนำเสนอและเนื้อหาทำงานแยกจากกันได้อย่างสมบูรณ์

    • สามารถทำดีไซน์ได้ภายใต้ข้อจำกัดของ CSS
    • เวลาจะเปลี่ยนสไตล์มักต้องแก้ DOM โดยตรง
    • ต้องผสมการตัดสินใจเรื่องการนำเสนอและโครงสร้างเนื้อหาเข้าด้วยกันในระดับ HTML และ Javascript

  • ในฐานะคนที่เรียน CSS ผ่าน Zen Garden และ Eric Meyer เครื่องมือ CSS สมัยใหม่อย่าง Tailwind ดูเหมือน anti-pattern

  • มันเป็นแสงสว่างในยุคมืดของ Tailwind และ CSS-in-JS

    • เป็นเรื่องยากที่จะตระหนักถึงความสำคัญของ CSS Zen Garden เมื่อ 20 ปีก่อน

  • ของเก่าแต่ดี

    • มันเป็นพื้นฐานในการสอนการออกแบบเว็บให้กับนักเรียนมัธยมปลายรายได้น้อย
    • นักเรียนต้องอธิบาย CSS ในการแข่งขันออกแบบเว็บ และหลายคนก็ชนะคอมพิวเตอร์เดสก์ท็อป
    • เคยส่งคำถามไปหา Dave Shea, Eric Meyer, Andy Budd และได้รับความช่วยเหลือกลับมา

  • เคยส่งดีไซน์ไปสองแบบ และจนถึงตอนนี้ก็ยังมีคนมาขอ CSS ที่เคยทำไว้

  • เว็บไซต์นี้เคยมีอิทธิพลอย่างมากในอดีต

    • สามารถส่ง CSS และรูปภาพสำหรับคอนเทนต์ HTML เดียวกันได้
    • มีตัวอย่างดีไซน์ที่น่าประทับใจอยู่หลายแบบ

  • ความทรงจำในอดีต... ชอบ CSS Zen Garden มาก แต่มันเป็นปรัชญาจากยุคที่จุดประสงค์หลักของเว็บไซต์คือการนำเสนอเอกสาร

    • โลกที่เต็มไปด้วยสื่อหลากหลายได้ทิ้งวิสัยทัศน์นี้ไว้ข้างหลังแล้ว

  • ดีใจที่ได้เห็น CSS Zen Garden บน HN

    • มีความไม่พอใจกับ "เฟรมเวิร์ก" CSS อย่าง Tailwind
    • Tailwind ทำให้ได้ผลลัพธ์ที่ "ดีพอใช้" โดยไม่ต้องเรียนรู้ว่า CSS ทำงานอย่างไร
    • HTML กลายเป็นสภาพที่มีคลาส CSS มากกว่าตัวเนื้อหา
    • มีแนวโน้มที่จะมองว่าความลึกและความชำนาญเป็นสิ่งที่เลือกมีก็ได้