ไลบรารี CSS cs16.css ที่อิงจาก UI ของ Counter Strike 1.6

 (cs16.samke.me)
1 คะแนน โดย GN⁺ 2025-01-25 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • cs16.css เป็นไลบรารี CSS ที่นำบรรยากาศ UI เกม Counter Strike 1.6 มาใช้กับคอมโพเนนต์ HTML ช่วยสร้างสไตล์เรโทรได้อย่างรวดเร็วเพียงเพิ่มคลาส
  • การติดตั้งทำได้โดยเพิ่มลิงก์สไตล์ชีต cs16.min.css จาก jsDelivr CDN ลงใน head ของ HTML
  • มีตัวอย่าง UI พื้นฐานให้ค่อนข้างครอบคลุม ตั้งแต่ปุ่ม ช่องกรอกข้อมูล select กลุ่ม radio slider dialog tooltip progress bar ไปจนถึง tab
  • dialog ใช้ HTML <dialog> และ showModal() ส่วน tab ทำงานด้วยโครงสร้าง radio input ร่วมกับ label/panel
  • โปรเจกต์เผยแพร่ภายใต้ MIT License พร้อมลิงก์ไปยัง GitHub repository และหน้า Samuel ผู้สร้าง

ไลบรารี CSS สไตล์ Counter Strike 1.6

  • cs16.css เป็นไลบรารี CSS ที่อิงจาก UI ของ Counter Strike 1.6
  • หน้าโปรเจกต์มีลิงก์ไปยัง GitHub repository และลิงก์ที่เกี่ยวข้องกับผู้สร้าง
  • การติดตั้งทำได้โดยเพิ่มสไตล์ชีตจาก jsDelivr CDN ลงในแท็ก head ของ HTML
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ekmas/…;

คอมโพเนนต์ UI ที่มีให้

  • ปุ่มและองค์ประกอบฟอร์มพื้นฐาน

    • ใช้คลาส cs-btn เพื่อปรับสไตล์ปุ่ม และมีตัวอย่างสถานะ disabled รวมอยู่ด้วย
    • ใช้คลาส cs-hr เพื่อสร้างสไตล์เส้นแบ่งได้
    • checkbox ใช้โครงสร้าง cs-checkbox, cs-checkbox__label
    • ช่องกรอกข้อมูลใช้คลาส cs-input, cs-input__label และมีตัวอย่างทั้งค่าที่กรอกได้ปกติและช่องกรอกแบบ disabled
    • select ใช้คลาส cs-select, cs-select__label โดยตัวอย่างประกอบด้วยตัวเลือก Volvo, Saab, Opel, Audi

  • UI สำหรับเลือกค่าและปรับค่า

    • radio group จัดวาง radio input และ label ไว้ภายใน cs-fieldset
    • ตัวอย่าง radio ใช้ตัวเลือก Elephant, Monkey, Cheetah, Giraffe
    • slider สร้างโดยใส่ input ประเภท range ไว้ในโครงสร้าง cs-slider
    • ตัวอย่าง slider มีค่า Dark/Light และ label Brightness

  • dialog, tooltip, progress bar

    • dialog ใช้ HTML <dialog> ที่ใส่คลาส cs-dialog
    • มีตัวอย่างการเปิด dialog เมื่อคลิกปุ่มด้วย document.querySelector('.cs-dialog').showModal();
    • ปุ่มด้านล่างของ dialog ประกอบด้วย OK, Cancel, Apply
    • tooltip ใช้ cs-tooltip และ span.text ภายใน โดยมีตัวอย่างตำแหน่ง Right, Left, Top, Bottom
    • progress bar วางองค์ประกอบ bars ไว้ใน cs-progress-bar และแสดงสถานะความคืบหน้าด้วย width: 50%

  • โครงสร้าง tab

    • tab ใช้โครงสร้างที่วาง radio input, label และ panel ไว้ภายใน cs-tabs
    • มีตัวอย่าง Tab One, Tab Two, Tab Three และคอนเทนต์ของแต่ละ tab

License และผู้สร้าง

  • ไลบรารีเผยแพร่ภายใต้ MIT License
  • ผู้สร้างระบุไว้เป็น Samuel

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

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

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

  • รอโอกาสที่จะได้เพิ่มคอลเลกชันให้มากขึ้นอยู่พอดี
    มีของแบบนี้ในหมวด ธีม CSS ย้อนยุค: https://alexbsoft.github.io/win95.css/ Windows 95, https://botoxparty.github.io/XP.css/ Windows XP, https://cs16.samke.me/ Counter-Strike 1.6, https://edwardtufte.github.io/tufte-css/ Edward Tufte, https://jdan.github.io/98.css/ Windows 98, https://khang-nd.github.io/7.css/ Windows 7, https://micah5.github.io/PSone.css/ PlayStation One, https://nostalgic-css.github.io/NES.css/ NES, https://sakofchit.github.io/system.css/ Apple System, https://thesimscss.inbn.dev/ The Sims

  • เมื่อเร็ว ๆ นี้ผมเห็นลูกชายเล่น Half-Life 2 แล้วรู้สึกว่า พวกเมนูที่เป็นสไตล์แบบนี้และดูเหมือน UI ของระบบคอมพิวเตอร์จริง ๆ นั้น ให้ความรู้สึกสมจริงและดื่มด่ำกว่ามาก
    ถึงมันอาจดูเก่า แต่มี ความรู้สึกแบบอุตสาหกรรมและเหมือนของจริง พร้อมกับใช้งานง่าย ในทางกลับกัน เกมยุคนี้จำนวนมากมีเมนูที่ถูกทำให้มีสไตล์จัดเกินไปแบบตัวอักษรตกแต่งลายดอกไม้ จนดูไม่สมจริง ประสบการณ์แย่ และการควบคุมเองก็กลายเป็นงานอีกอย่าง

    • ถ้าแนวโน้ม UI ทุกวันนี้คือทำให้แบนราบและซ่อนฟังก์ชัน จนทำลาย ความสามารถในการค้นพบ ซึ่งเป็นแก่นของประสบการณ์ผู้ใช้ ผมมองว่า “ความเก่า” ไม่ใช่ข้อบกพร่อง แต่เป็นฟีเจอร์
    • เรื่อง UI เมนูของเกมสมัยใหม่ ผมไม่อยากเริ่มพูดด้วยซ้ำ
      ประมาณปีก่อนผมซื้อ CoD ภาคล่าสุดสำหรับ PS5 แล้วไม่เข้าใจเลยว่าในเมนูมันเกิดอะไรขึ้นกันแน่ เป็น โครงสร้างที่ยุ่งเหยิง จนแทบนำทางไม่ได้ ทำให้รู้สึกเหมือนจะบ้า หรือบางทีอาจเป็นแค่ผมแก่แล้วก็ได้
    • เมนูที่ถูกทำให้มีสไตล์จัดเกินไปก็อาจเข้ากันได้ดี ขึ้นอยู่กับสไตล์หรือโทนของเกม
      ปัญหาจริง ๆ คือ UI ที่แบนสนิท ธรรมดาไร้ลักษณะ ไม่มีสี ไม่มีสไตล์หรืออัตลักษณ์ใด ๆ ซึ่งพบมากในเกมยุคนี้ เช่น Nintendo ก็ทำแบบนี้อยู่ไม่น้อย
    • ผมชอบระบบเมนูของ Crysis 2 หรือ 3 นี่แหละ มันให้ความรู้สึกจริง ๆ ว่า กำลังอยู่ในนาโนสูท
    • UI เก่า ๆ มี affordance ที่ดี มองออกว่าองค์ประกอบ UI ไหนโต้ตอบได้หรือไม่ได้ แต่ UI “สมัยใหม่” ค่อนข้างแย่ในด้านนี้

  • ดีมากเลย ปีที่แล้วผมติดตั้ง CS 1.6 กลับมาอีกครั้งหลังแทบไม่ได้แตะมาเกือบ 15 ปี และช่วงนี้ก็เล่นกับบอตวันละ 10~15 นาทีแทบทุกวันเพื่อเคลียร์หัว
    เพื่อเพิ่มความสนุก ผมสร้างทีมบอตเองด้วย และถึงขั้นทำทัวร์นาเมนต์เต็มรูปแบบให้แข่งกับทีมโปรช่วงราว ๆ ปี 2008 ผมยังไปเจอแมปที่เคยทำไว้เองจากฮาร์ดดิสก์เก่าแก่มาก ๆ อีกด้วย ไม่คิดเลยว่าจนเกือบอายุ 40 แล้วยังจะได้เล่นมัน และรู้สึกขอบคุณตัวเองในอดีต

    • CS เหมาะกับการ เคลียร์หัว เสมอ เกมจัดอันดับ 5v5 นั้นกดดันมาก เข้มข้น ใช้เวลาประมาณ 30~45 นาที และเติมเต็มการปฏิสัมพันธ์กับผู้คนได้พอดี ตั้งแต่เลิกเล่นไปเมื่อไม่กี่ปีก่อน ผมก็ยังหาอะไรมาแทนไม่ได้
    • มีความทรงจำดี ๆ จากปี 2005 ที่เล่น แมป kz_ กันเป็นชั่วโมง ๆ ฝีมือของบางคนน่าทึ่งจริง ๆ ผมคิดถึงความรู้สึกแปลก ๆ ตอนอยู่คนเดียวในแมป kz ตอนตี 3 แล้วได้ยินเสียงใครสักคนกระโดดวิ่งไปมา
    • ความทรงจำตอนเล่นแมปคัสตอมอย่าง de_747 กับเพื่อน ๆ ผ่าน LAN หรือ dial-up ถาโถมกลับมาเลย: https://gamebanana.com/mods/82979
      ถึงตอนนี้ผมก็ยังมองว่าแมปนี้เป็นหนึ่งในแมปคัสตอมที่มีบรรยากาศดีที่สุดตลอดกาล จะมีแมปไหนอีกที่ให้เราเล่นบทบาทเป็น Gary Oldman หรือ Harrison Ford ได้
    • ผมเองก็ไม่ได้แตะ CS 1.6 มา 15~16 ปีแล้ว น่าจะสนุกถ้ากลับไปลองเล่นอีก อยากรู้ว่ารันบน Mac M1 ได้ไหม หรือจำเป็นต้องใช้ virtual machine และอยากได้คำแนะนำแหล่งอ่านเรื่องการตั้งค่าและคอนฟิกบอตด้วย

  • ในเชิงเทคนิคแล้ว มันไม่ใช่ UI เฉพาะของ Counter-Strike แต่เดิมทีเป็น Steam UI ไม่ใช่เหรอ?

    • ใช่ แต่เดิม Steam ถูกสร้างขึ้นเพื่อจัดการอัปเดตของ Counter-Strike และระบบป้องกันการโกง ถ้าจำไม่ผิดคือ VAC
      เป็นยุคที่ WON ID หรือ SteamID ในปัจจุบัน ถ้าเลขต่ำก็ถูกมองเหมือนเหรียญเชิดชูเกียรติ คล้าย ๆ ID บัญชี Slashdot เลขต่ำ
    • ใช่ ไคลเอนต์ Steam เดิมสร้างบน ไลบรารี VGUI เดียวกับที่ใช้ในเกมของ Valve และตอนนั้นใช้สไตล์เดียวกับ HL1/CS ฯลฯ
    • มันถูกเพิ่มเข้า Half-Life ราวเดือนมีนาคม 2000 และไม่นานหลังจากนั้นก็เข้า Counter-Strike ด้วย ผมไม่แน่ใจว่า Steam ออกมาครั้งแรกเมื่อไหร่ แต่คิดว่ามีเบต้าตั้งแต่ปี 2002
    • ทุกวันนี้ถ้ากดปุ่มที่ไม่ค่อยพบบ่อยใน Steam หรือทำให้เกิดข้อผิดพลาดแปลก ๆ ก็ยังมีความรู้สึกเหมือนหน้าต่างสไตล์นี้จะเด้งออกมาจากที่ไหนสักแห่ง
      คล้ายกับที่ใน Windows 11 จนถึงปีที่แล้วบางครั้งยังมีไดอะล็อกสไตล์ Windows 3.x โผล่มา และยังเหลือร่องรอยยุค Windows 9x อยู่เล็กน้อย

  • https://alpynedreams.github.io/vgui.css/demo_greensteam

    • อันนี้ก็ใช้ element กับ progress bar เหมือนกัน

  • อ่านเพิ่มเติมเกี่ยวกับ VGUI: https://developer.valvesoftware.com/wiki/Category:VGUI
    ข้อเท็จจริงที่น่าสนใจคือ ใน CS 1.6 สามารถใส่ setinfo "_vgui_menus" "0" ใน config.cfg หรือคอนโซล หรือไปที่ “Options > Multiplayer > Advanced > Buy menu type > VGUI Menus” เพื่อย้อนกลับไปใช้ WON UI แบบเก่าได้

    • ใช่ เมนูแบบข้อความคือสิ่งที่ Half-Life ใช้ตอนเปิดตัวในปี 1998
      Counter-Strike ก็ใช้เมนูแบบข้อความเดียวกันในปี 1999 และเพิ่งอัปเดตเอนจินให้รวม VGUI ในปี 2000 ผมเดาว่า Counter-Strike คงเหลือเมนูเก่าไว้สำหรับคนที่ชอบวิธีนั้น

  • ผมคิดว่านี่ไม่ใช่ CS 1.6 เองเท่าไร แต่เป็น Steam UI หรือก็คือ UI ฝั่ง server browser กับ settings
    แต่จำไม่ค่อยได้แล้วว่าก่อนรวมกับ Steam หน้าตาเป็นอย่างไร

    • CS 1.6 เป็นเกมสำหรับ Steam เท่านั้น ผมจำได้ว่าไม่ชอบแนวคิดของ Steam เลย เลยเลื่อนการลงทะเบียนไปค่อนข้างนาน ก่อนสุดท้ายจะยอมแพ้
      ตอนนี้ผมยังมี Steam ID 6 หลัก อยู่ ซึ่งครั้งหนึ่งดูเหมือนจะมีความหมายอะไรบางอย่าง แต่จริง ๆ ก็ไม่ได้มีความหมายเท่าไร server browser ของ CS 1.5 หรือต่ำกว่านั้นฝังอยู่ในเมนูของแอปพลิเคชัน และอันนี้เป็น Steam UI จริง ๆ ไม่ใช่ Counter-Strike ในยุคนั้นยังมีเกมอย่าง Go ที่เล่นกับคนในรายชื่อเพื่อนได้ฝังอยู่ด้วย
    • นี่คือ VGUI2 ที่ทำขึ้นสำหรับเอนจิน Source แล้วถูกนำกลับมาใช้ใน Steam ก่อนจะถูกพอร์ตย้อนกลับไปยังเอนจิน GoldSource ตอนที่เกมต่าง ๆ ถูกออกบน Steam
    • ตอนนั้น Steam แทบจะเป็น ลอนเชอร์ CS 1.6 เลย

  • ถ้าถือมีด ทุกคนจะวิ่งเร็วขึ้น

    • ตลกดีที่ในเกมสมัยใหม่อย่าง Call of Duty: Black Ops 6 ก็ยังเป็นแบบนั้นอยู่ ไม่ใช่แค่มีด แต่รวมถึงอาวุธระยะประชิดโดยรวมด้วย
    • หัวใจเต้นแรง! มือสั่น!

  • เจ๋งดี ผมไม่ใช่เกมเมอร์ แต่เคยเห็นลูกชายเล่นเกมหลายเกม และชอบที่ UI นี้ ดูสะอาดตาและแตกต่าง ไม่ใช่เพราะมันเป็นของเกมใดเกมหนึ่งโดยเฉพาะ
    อยากรู้เหมือนกันว่ามีไลบรารี CSS แปลกๆ แบบอื่นที่เอาไปใช้กับหน้าเว็บได้อีกไหม

  • ยุค 90s กับต้น 2000s คือ ยุคทองของ UI

    • ตอนนั้นบริษัทเทคโนโลยีกำลังพยายามทำให้คอมพิวเตอร์กลายเป็นของใช้ในบ้านทั่วไป จึงทำการทดสอบกับผู้ใช้อย่างมหาศาล และเมื่อ ความสามารถในการค้นพบได้ กลายเป็นเรื่องสำคัญ ประสบการณ์ผู้ใช้ก็พัฒนาขึ้นมาก
      แต่ราว 10 ปีก่อน พวกเขาเริ่มทิ้งงานวิจัยเหล่านั้นทั้งหมด เพราะภาพหน้าจอสำหรับการตลาดดูทำได้ง่ายกว่า แล้วหันไปชอบ UI แบบมินิมัล สะอาด แบน และ “ทันสมัย” ตัวเลือกและการปรับแต่งหายไป แล้วปล่อยให้ Apple กับ Microsoft ตัดสินว่าเดสก์ท็อปควรหน้าตาเป็นอย่างไร ด้วยเหตุผลว่าใครบางคนอาจสับสนถ้าเปิดพาเนลตัวเลือกขึ้นมา ผมเกลียดแทบทุกส่วนของประสบการณ์ผู้ใช้บน macOS, Dock ก็แย่มาก และค่าเริ่มต้นแปลกๆ ก็มีเยอะเกินไป การซ่อน scrollbar, pointer acceleration, การกลับทิศ scroll wheel ไม่ใช่ฟีเจอร์ แต่เป็นบั๊ก Windows อย่างน้อยก็ยังใช้ซอฟต์แวร์ภายนอกทำให้ taskbar กับ Start menu ดูและให้ความรู้สึกเหมือนยุค Win2K ได้ สิ่งที่ผมหงุดหงิดที่สุดในประสบการณ์ผู้ใช้สมัยใหม่คือการรวมหลายหน้าต่างของโปรแกรมเดียวกันให้เป็นอันเดียวและตัดข้อความออก ถ้ามีหน้าต่าง Firefox เปิดอยู่ 3 หน้าต่าง รายการบน taskbar ก็ควรมี 3 รายการ เพื่อให้คลิกครั้งเดียวไปยังหน้าต่างที่ต้องการได้ และยังทำให้ใส่สถานะไว้ในชื่อหน้าต่างเพื่อใช้เหมือนวิดเจ็ตสำหรับเฝ้าดูอะไรบางอย่างได้ด้วย
    • ตอนลองเล่น WebSerial ผมใช้ XP.css ซึ่งทำให้นึกถึง การตั้งค่าโมเด็มแบบอนุกรม สมัยก่อน เลยคิดว่าเข้ากับสุนทรียะได้ค่อนข้างดี
      https://web-serial-app.netlify.app/
      ซอร์ส: https://github.com/tanepiper/web-serial-controller
    • เห็นด้วยเต็มที่
      แต่พูดอย่างเป็นธรรม ผมยังใช้ Windows 7 ในโหมด UI พื้นฐานแบบไม่มีธีมอยู่ และก็ไม่ได้เล่นเกมสมัยใหม่มากนัก เลยเทียบให้ชัดเจนได้ยาก