งานศิลปะ CSS ที่สร้างด้วย Div เดียว

 (a.singlediv.com)
2 คะแนน โดย GN⁺ 2024-05-03 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • A Single Div เป็น การทดลองวาดภาพด้วย CSS ที่แสดงให้เห็นว่าสามารถสร้างงานภาพแบบใดได้บ้างด้วย div เพียงตัวเดียว
  • โปรเจกต์นี้ระบุว่าเป็นผลงานของ Lynn Fisher และแจ้งช่วงเวลาไว้ที่ 2014-2019
  • บนหน้าเพจมีรายการ GitHub, #divtober, และ Buy me a coffee จัดวางอยู่ด้วยกัน
  • จากข้อความที่ให้มาเพียงอย่างเดียว ยังไม่สามารถยืนยันรายละเอียดอย่างโค้ดที่ใช้สร้าง รายการผลงาน หรือขั้นตอนการทำได้
  • ข้อจำกัดสำคัญคือการมุ่งเน้นการแสดงผลด้วย CSS ไปที่ องค์ประกอบ HTML เพียงตัวเดียว แทนการใช้หลายองค์ประกอบ HTML

ลักษณะของโปรเจกต์

  • A Single Div เป็นการทดลองวาดภาพด้วย CSS เพื่อดูว่า “สิ่งที่ทำได้ด้วย div เดียว” มีอะไรบ้าง
  • บนหน้าเพจมีคำอธิบายว่า a CSS drawing project by Lynn Fisher
  • ระบุช่วงเวลาการทำงานไว้ที่ 2014-2019

รายการที่ตรวจพบได้บนหน้าเพจ

  • มีรายการ GitHub
  • มีรายการ #divtober
  • มีรายการ Buy me a coffee
  • จากข้อความที่ให้มาเพียงอย่างเดียว ยังไม่สามารถตรวจสอบปลายทางลิงก์หรือคำอธิบายเพิ่มเติมของแต่ละรายการได้

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

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

 
GN⁺ 2024-05-03
ความคิดเห็นจาก Hacker News
  • นึกถึงเดโมที่เคยมีคนโพสต์ไว้ก่อนหน้านี้ ในหน้ามีคอนเทนต์แสดงอยู่ แต่เท่าที่จำได้พอกด ดูซอร์ส แล้วเป็น 0 ไบต์
    น่าจะใช้ความสามารถที่อ้างอิง CSS ผ่าน HTTP header ได้ ทำให้ใน HTML ไม่มี CSS และ CSS ไปผูกคอนเทนต์กับองค์ประกอบจำเป็นที่เบราว์เซอร์เพิ่มเข้าไปในหน้าโดยอัตโนมัติ
    • https://news.ycombinator.com/item?id=34464951
    • อาจหมายถึงเดโมของ pwnfunction ก็ได้
      "This Site Has No Code, or Does It?" https://youtu.be/msdymgkhePo
    • เป็นการทดลองที่น่าสนุก ถ้าเจอลิงก์ก็อยากให้แชร์กัน อยากลองเล่นเองแล้วดูว่าข้างในเกิดอะไรขึ้นกันแน่
  • ในปี 2016 และ 2014 ก็มีการถกเถียงเกี่ยวกับเรื่องนี้ค่อนข้างเยอะ และเมื่อ 16 วันก่อนก็มีโปรเจกต์คล้ายกันชื่อ Only s
    [0]: https://news.ycombinator.com/item?id=8229072
    [1]: https://news.ycombinator.com/item?id=12091173
    [2]: https://news.ycombinator.com/item?id=40049258
    • เว็บไซต์ a single div บางทีก็น่าสนใจและเป็นแรงบันดาลใจที่ดี เลยเอามาแชร์ โดยรวมแล้วคิดว่าการหยิบโปรเจกต์เก่ามามองและคุยกันใหม่จากมุมมองการพัฒนาเว็บยุคปัจจุบันเป็นประโยชน์ต่อคอมมูนิตี้
  • คนที่ทำ CSS art นี่น่าทึ่งเสมอ ทุกวันนี้ฝั่งกราฟิก 3D อะไรก็เต็มไปด้วย three.js แต่ CSS art ก็มีพื้นที่ใช้งานของมันชัดเจน และดูเหมือนหลายคนจะลืมไป หรือไม่ก็ไม่ขุดลึกเพราะมันยากเกินไป
    three.js ยอดเยี่ยมเวลาทำฉากใหญ่ ๆ แต่ฉากตัวละครเดี่ยวเล็ก ๆ ที่ใส่ในเว็บส่วนตัวก็ทำด้วย CSS ได้ เคยพยายามทำตาม CodePen เจ๋ง ๆ หลายครั้ง แล้วหมดสุดสัปดาห์ไปทั้งวันก็ยังทำได้ไม่สมบูรณ์
    อินเทอร์เน็ตอาจพร้อมแล้วก็จริง แต่คงพูดยากว่าอุปกรณ์ส่วนใหญ่ที่เชื่อมต่ออินเทอร์เน็ตรองรับ WebGL ได้ดี ทั้งนี้ขึ้นอยู่กับกลุ่มผู้ใช้เป้าหมาย แต่การทำเว็บไซต์ที่ทุกคนเข้าถึงได้ ดีกว่าทำเว็บเพื่อคนในรั้วของตัวเองเท่านั้น
    • CSS art มีความแปลกใหม่ แต่ต้องลงลึกไปถึงรายละเอียดจุกจิกมาก ๆ ของ CSS เลยดูเหมือนนักพัฒนามักไม่ค่อยชอบนัก ในทางกลับกัน three.js กำลังถูกดันขึ้นมาเป็นกระแสหลักในคอมมูนิตี้ศิลปิน/โค้ดเดอร์ 3D เฉพาะทาง ซึ่งตัวมันเองอาจเป็นเรื่องดี
      ถึงอย่างนั้น three.js ก็ไม่ใช่คำตอบที่สมบูรณ์แบบสำหรับทุกอย่าง และควรดูข้อดีข้อเสียก่อนใช้ เพื่อไม่ให้ทำเว็บไซต์ที่บวมเกินจำเป็น
    • เคยทำเครื่องมือสร้าง ปุ่มเอฟเฟกต์อนุภาค ด้วยเทคนิค CSS แบบนี้ [0]
      คิดมาตลอดว่าน่าจะสนุกถ้ามีเครื่องมือให้แก้ไข “รูปภาพ” เล็ก ๆ จากรูปทรงพื้นฐานแล้วส่งออกโค้ด CSS อัตโนมัติ เลยสงสัยว่ามีใครรู้จักเครื่องมือแบบนั้นไหม
      [0] https://bewelge.github.io/CSS-Button-Particles/ บนมือถือ UI ดูแย่มาก แต่เอฟเฟกต์ปุ่มเองน่าจะทำงานได้ดี
    • ลองดูแคมป์ไฟที่ทำด้วย CSS ล้วน ๆ ได้ด้วย (:
      https://megaemce.github.io/Bonfire
  • ไม่เข้าใจว่า single div ในที่นี้หมายถึงอะไร พอดูซอร์สแล้วก็เลิกนับจำนวน div ไป จึงไม่น่าจะหมายความตามตัวอักษรว่า “หน้านี้มี div แค่ตัวเดียว” แล้วมันหมายถึงอะไรกันแน่?
    • รูปวาดเล็ก ๆ แต่ละชิ้นทำด้วย div หนึ่งตัว ถ้าพูดให้แม่นกว่านั้นคือมี div คอนเทนเนอร์ที่ไม่นับ มี div หลักที่นับ และใส่คอนเทนต์ด้วย ::before กับ ::after ที่ไม่นับ
      ในฐานะแบบฝึกความคิดสร้างสรรค์ก็น่าสนใจ แต่ผมมองว่าการใช้ ::before กับ ::after มากเกินไปเป็นแนวปฏิบัติที่แย่เสมอ ความหมกมุ่นอยากได้ HTML ที่ “สะอาด” เป็นเรื่องโง่ และ HTML ที่ชัดเจน ดูแลรักษาง่ายกว่า
    • “รูป” แต่ละรายการในลิสต์ถูกเรนเดอร์ด้วยกฎ CSS ที่กำหนดไว้ใน div เดี่ยว
      ส่วนใหญ่เป็นกลเม็ดที่ใช้ box-shadow จำนวนมาก
  • กดลิงก์ของดีไซเนอร์ Lynn Fisher ด้านบนเข้าไปที่ https://lynnandtonic.com/ แล้วบังเอิญเจออะไรบางอย่าง
    ตอนเปิด Developer Tools ในหน้าต่าง Chrome แล้วปรับขนาดอยู่ เห็นคนในโลโก้เดินขึ้นลงทางตามทิศทางที่ปรับขนาด เจ๋งจริง ๆ
    • ไม่เคยรู้เรื่องนี้เลย ชักอยากลองทำตามในสภาพแวดล้อมที่ง่ายกว่านี้ช่วงสุดสัปดาห์ อาจทำเป็นลูกบอลกลิ้งไปตามถนน หรือยานอวกาศบินรอบโลกอะไรแบบนั้นได้
    • ดูเหมือนจะทำงานเฉพาะใน Chrome และเฉพาะตอน ปรับขนาดแนวนอน เท่านั้น
    • ในพื้นหลังก็มีการอ้างอิงถึง Daria ด้วย
  • มีใครจำ Simpsons ที่ทำด้วย CSS ได้ไหม? อันนั้นก็เจ๋งเหมือนกัน
    https://pattle.github.io/simpsons-in-css/
    • พวกนี้ก็สนุกดี ถ้าเอาตำแหน่งเมาส์มาเป็น event trigger สำหรับการขยับตา น่าจะกลายเป็น Simpsons เวอร์ชันชวนขนลุกที่ดูสมจริงพอสมควร
  • กำลังดูบนมือถือ หมายความว่ากราฟิกแต่ละชิ้นทำด้วย div เดี่ยว เหรอ? น่าทึ่ง
    เซนส์ด้านกราฟิกดีด้วย
    • ใช่ ทั้งหมดเป็น div ตัวเดียว ในเชิงเทคนิคคือ div หนึ่งตัวบวก pseudo-elements ::before และ ::after แต่ก็ยังเป็น CSS ทั้งหมดอยู่ดี
  • ดีใจที่มันกลับมาอีกครั้ง พอจำได้ลาง ๆ แต่ไม่ได้ดูมาพักใหญ่แล้ว และยังน่าประทับใจมากเหมือนเดิม
    • อยากกลับมาดูเว็บนี้อีก แต่จำชื่อไม่ได้ ต้องไปคุ้ยโฟลเดอร์ “dump link” ของตัวเองต่ออีกพักหนึ่งถึงจะเจอ
  • เจ๋งดี แต่หวังว่าผู้เขียนจะจัดรูปแบบ HTML ให้อ่านง่ายกว่านี้หน่อย ใน inspector ก็โอเค แต่ของแบบนี้มันทำให้กด ดูซอร์ส โดยสัญชาตญาณ แล้วพอมันถูกตัด whitespace ออกก็แทบอ่านไม่ได้
    • HTML มีแค่ div หนึ่งตัวต่อ “ผลงาน” เท่านั้น และส่วนที่น่าสนใจมีแค่ CSS ถ้าอยากดูเวทมนตร์เบื้องหลังแต่ละชิ้น แค่คลิกขวาแล้ว ตรวจสอบองค์ประกอบ จะดีกว่ามาก
  • ชอบเว็บนี้มากจริง ๆ
    • บางครั้งก็อยากนั่งลงแล้วลองทำชิ้นเล็ก ๆ เหล่านี้ขึ้นมาใหม่ทีละชิ้น