Counter Strike 1.6 UI आधारित CSS लाइब्रेरी cs16.css

 (cs16.samke.me)
1 पॉइंट द्वारा GN⁺ 2025-01-25 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • cs16.css एक CSS लाइब्रेरी है जो HTML components को Counter Strike 1.6 के game UI जैसा feel देती है, जिससे सिर्फ classes जोड़कर जल्दी retro style बनाया जा सकता है
  • installation के लिए HTML head में jsDelivr CDN की cs16.min.css stylesheet link जोड़नी होती है
  • buttons, input fields, select, radio group, slider, dialog, tooltip, progress bar और tabs तक, basic UI examples व्यापक रूप से शामिल हैं
  • dialog HTML <dialog> और showModal() का उपयोग करता है, और tabs radio input तथा label/panel structure से काम करते हैं
  • project MIT License के तहत उपलब्ध है, और GitHub repository व creator Samuel के page के links भी दिए गए हैं

Counter Strike 1.6 style CSS लाइब्रेरी

  • cs16.css Counter Strike 1.6 UI पर आधारित एक CSS लाइब्रेरी है
  • project page GitHub repository और creator से जुड़े links प्रदान करता है
  • installation के लिए HTML head tag में jsDelivr CDN stylesheet जोड़ना काफी है
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ekmas/…;

उपलब्ध UI components

  • buttons और basic form elements

    • cs-btn class से button style apply किया जाता है, और disabled state का example भी शामिल है
    • cs-hr class से separator line style बनाई जा सकती है
    • checkbox cs-checkbox, cs-checkbox__label structure का उपयोग करता है
    • input field cs-input, cs-input__label classes का उपयोग करती है, और normal input value व disabled input value के examples हैं
    • select cs-select, cs-select__label classes का उपयोग करता है, और example Volvo, Saab, Opel, Audi options से बना है

  • selection UI और value control

    • radio group में cs-fieldset के अंदर radio input और label रखे जाते हैं
    • radio example में Elephant, Monkey, Cheetah, Giraffe विकल्प इस्तेमाल किए गए हैं
    • slider cs-slider structure के अंदर range input डालकर बनाया जाता है
    • slider example में Dark/Light values और Brightness label शामिल हैं

  • dialog, tooltip, progress bar

    • dialog cs-dialog class apply किए हुए HTML <dialog> का उपयोग करता है
    • button click पर document.querySelector('.cs-dialog').showModal(); से dialog खोलने का example शामिल है
    • dialog के नीचे के buttons OK, Cancel, Apply से बने हैं
    • tooltip cs-tooltip और अंदरूनी span.text का उपयोग करता है, तथा Right, Left, Top, Bottom positions के examples हैं
    • progress bar cs-progress-bar के अंदर bars element रखकर width: 50% से progress state दिखाता है

  • tabs structure

    • tabs cs-tabs के अंदर radio input, label, panel रखने वाले structure पर आधारित हैं
    • Tab One, Tab Two, Tab Three examples और हर tab का content शामिल है

license और creator

  • library MIT License के तहत उपलब्ध है
  • creator Samuel के रूप में दिखाया गया है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-01-25
Hacker News की राय

  • मैं अपनी collection को और बढ़ाने का मौका इंतज़ार कर रहा था
    retro CSS themes में ये शामिल हैं: 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 जैसे दिखें, तो वे कहीं ज़्यादा यथार्थवादी और immersive लगते हैं
    पुराने लग सकते हैं, लेकिन उनमें industrial और वास्तविक एहसास होता है, और साथ ही वे इस्तेमाल करने में आसान भी होते हैं। इसके उलट, आजकल बहुत से गेम्स में फूलदार सजावटी अक्षरों जैसे ज़रूरत से ज़्यादा stylized मेन्यू होते हैं, जो अवास्तविक लगते हैं, अनुभव खराब करते हैं, और उन्हें चलाना ही एक काम बन जाता है

    • अगर आज के UI ट्रेंड सब कुछ सपाट बनाकर और फीचर छिपाकर user experience के मूल तत्व discoverability को खराब कर रहे हैं, तो “पुराना” होना खामी नहीं बल्कि एक फीचर है
    • आधुनिक गेम्स के मेन्यू UI की बात शुरू भी नहीं करना चाहता
      करीब एक साल पहले PS5 के लिए नया CoD खरीदा था, लेकिन मेन्यू में आखिर क्या हो रहा है यह समझ ही नहीं आया। वह इतनी अव्यवस्थित संरचना थी कि पागल होने जैसा लग रहा था, और लगा शायद मैं ही बूढ़ा हो गया हूँ
    • गेम के स्टाइल या टोन के हिसाब से ज़्यादा stylized मेन्यू अच्छी तरह फिट हो सकते हैं
      असली समस्या आजकल के गेम्स में मिलने वाला वह पूरी तरह flat, generic, बेरंग UI है, जिसमें कोई स्टाइल या पहचान ही नहीं होती। उदाहरण के लिए Nintendo ऐसा काफी करता है
    • Crysis 2 या 3, जो भी था, उसका मेन्यू सिस्टम अच्छा था। सच में nanosuit के अंदर होने का एहसास देता था
    • पुराने UI में affordance अच्छी होती है। यह दिखता है कि कौन-सा UI element interact किया जा सकता है और कौन-सा नहीं, जबकि “modern” UI इस मामले में काफी खराब है

  • बहुत बढ़िया। पिछले साल मैंने लगभग 15 साल बाद फिर से CS 1.6 इंस्टॉल किया, और आजकल लगभग हर दिन 10~15 मिनट bots के खिलाफ खेलकर दिमाग खाली करता हूँ
    मज़ा बढ़ाने के लिए मैंने खुद bot teams भी बनाई, और 2008 के आसपास की pro teams के खिलाफ पूरा tournament तक बनाया। मैंने अपने पुराने maps भी एक बहुत पुराने hard disk से फिर ढूंढ निकाले, और लगभग 40 साल की उम्र में भी उन्हें खेलूँगा यह कभी सोचा नहीं था; अपने पुराने वाले खुद का आभारी हूँ

    • CS हमेशा दिमाग खाली करने के लिए अच्छा रहा है। Ranked 5v5 गेम्स दबाव वाले, intense होते हैं, 30~45 मिनट लेते हैं, और जितनी social interaction चाहिए उतनी भी दे देते हैं। कुछ साल पहले छोड़ने के बाद से उसका कोई विकल्प नहीं मिला
    • 2005 में kz_ maps पर घंटों बिताने की अच्छी यादें हैं। कुछ लोगों की skill सच में हैरान कर देने वाली थी। रात के 3 बजे kz map में अकेले होना और फिर किसी के कूदते-दौड़ते कदमों की आवाज़ सुनना—उस एहसास की अजीब-सी कमी महसूस होती है
    • दोस्तों के साथ LAN या dial-up पर de_747 जैसे custom maps खेलने की यादें उमड़ आईं: https://gamebanana.com/mods/82979
      आज भी मुझे लगता है कि यह map अब तक के सबसे atmospheric custom maps में से एक है। Gary Oldman या Harrison Ford की roleplay करने के लिए इससे बेहतर map और कहाँ मिलेगा
    • मैंने भी CS 1.6 को 15~16 साल से छुआ नहीं है, लेकिन फिर से खेलना मज़ेदार लग रहा है। सोच रहा हूँ कि यह Mac M1 पर चल जाएगा या virtual machine चाहिए होगी। bots को सेट up और configure करने के बारे में पढ़ने लायक सामग्री की भी सिफारिश चाहिए

  • तकनीकी रूप से देखें तो यह Counter-Strike का अपना UI कम और मूल Steam UI ज़्यादा नहीं है?

    • सही। लेकिन मूल Steam तो Counter-Strike updates और anti-cheat system, और अगर सही याद है तो VAC, संभालने के लिए बनाया गया था
      वह ऐसा दौर भी था जब कम WON ID, यानी आज के SteamID का छोटा नंबर, किसी मेडल जैसा माना जाता था। कुछ-कुछ कम Slashdot account ID जैसा
    • हाँ। Steam client मूल रूप से Valve गेम्स में इस्तेमाल होने वाली उसी VGUI library पर बना था, और उस समय HL1/CS जैसी ही स्टाइल इस्तेमाल करता था
    • यह करीब मार्च 2000 में Half-Life में जोड़ा गया था, और उसके थोड़े समय बाद Counter-Strike में भी आया। Steam पहली बार ठीक कब आया यह पक्का नहीं, लेकिन लगता है 2002 से beta था
    • आज भी Steam में कोई कम इस्तेमाल होने वाला button दबाओ या कोई दुर्लभ error trigger करो, तो लगता है कहीं से इसी स्टाइल की window पॉप-अप हो जाएगी
      कुछ वैसा ही जैसे Windows 11 में भी पिछले साल तक कभी-कभी Windows 3.x स्टाइल dialog box दिख जाता था, और अभी भी Windows 9x ज़माने के कुछ अवशेष बचे हुए हैं

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

    • यह भी progress bar के लिए element इस्तेमाल कर रहा है

  • VGUI के बारे में आगे पढ़ने के लिए: https://developer.valvesoftware.com/wiki/Category:VGUI
    एक दिलचस्प बात यह है कि CS 1.6 में config.cfg या console में setinfo "_vgui_menus" "0" डालकर, या मेन्यू के “Options > Multiplayer > Advanced > Buy menu type > VGUI Menus” से पुराने WON UI पर वापस जाया जा सकता था

    • सही। Text-based menu वही था जो Half-Life के 1998 में रिलीज़ होने के समय इस्तेमाल होता था
      Counter-Strike ने भी 1999 में वही text-based menu इस्तेमाल किया था, और 2000 में जाकर engine को VGUI शामिल करने वाला update मिला। शायद Counter-Strike ने पुराने menu इसलिए छोड़े रखा क्योंकि कुछ लोग उसी तरीके को पसंद करते थे

  • मुझे लगता है यह CS 1.6 खुद से ज़्यादा Steam UI है, यानी server browser और settings वाला UI
    बस Steam integration से पहले यह कैसा दिखता था, यह ठीक से याद नहीं

    • CS 1.6 केवल Steam पर था। मुझे Steam जैसा कॉन्सेप्ट पसंद नहीं था, इसलिए मैंने काफी समय तक register करने में देरी की, फिर आखिरकार मान गया
      मेरे पास अभी भी 6-digit Steam ID है, जो कभी कुछ मायने रखती हुई लगती थी, लेकिन असल में उसका कोई खास मतलब नहीं था। CS 1.5 और उससे पहले के server browser application menu के अंदर built-in होते थे, और यह Counter-Strike का नहीं बल्कि सच में Steam UI है। उस दौर में friends list के लोगों के साथ खेला जा सकने वाला Go जैसा गेम भी built-in था
    • यह Source engine के लिए बनाया गया VGUI2 है, जिसे Steam में reuse किया गया, और बाद में जब गेम्स Steam पर रिलीज़ हुए तो इसे GoldSource engine में backport किया गया
    • उस समय Steam लगभग CS 1.6 launcher ही था

  • चाकू पकड़ो तो सब तेज़ दौड़ते हैं

    • यह थोड़ा मज़ेदार है कि Call of Duty: Black Ops 6 जैसे आधुनिक गेम्स में भी अब तक ऐसा ही होता है। सिर्फ चाकू नहीं, बल्कि melee weapons आम तौर पर ऐसे ही काम करते हैं
    • दिल धड़क रहा है! हाथ काँप रहे हैं!

  • कमाल है। मैं gamer नहीं हूँ, लेकिन मैंने अपने बेटे को कई गेम खेलते देखा है, और मुझे यह बात अच्छी लगी कि यह UI किसी खास गेम से जुड़ा होने की वजह से नहीं, बल्कि साफ-सुथरा और अलग होने की वजह से आकर्षक है
    सोच रहा हूँ कि क्या पेजों में इस्तेमाल करने लायक ऐसी और भी अनोखी CSS libraries हैं

  • 90s और 2000s की शुरुआत UI का स्वर्णयुग थी

    • वह दौर ऐसा था जब tech कंपनियाँ कंप्यूटर को एक आम घरेलू चीज़ बनाना चाहती थीं, इसलिए वे बहुत ज़्यादा user testing करती थीं, और discoverability महत्वपूर्ण होने के कारण user experience भी काफ़ी आगे बढ़ा था
      लेकिन करीब 10 साल पहले से उन्होंने उस शोध को फेंकना शुरू कर दिया, क्योंकि marketing screenshots में minimal, साफ, flat और “sleek” UI ज़्यादा आसान दिखते थे। choice और customization गायब हो गए, और Apple व Microsoft ने यह तय करना शुरू कर दिया कि desktop कैसा दिखना चाहिए, क्योंकि अगर options panel खोलो तो कोई भ्रमित हो सकता है। मुझे macOS user experience का लगभग हर हिस्सा नापसंद है, Dock भी भयानक है, और बहुत सारे अजीब default settings हैं। scrollbars छिपाना, pointer acceleration, और scroll wheel inversion features नहीं बल्कि bugs हैं। Windows में कम-से-कम third-party software के ज़रिए taskbar और Start Menu को Win2K दौर जैसा दिखाना और महसूस कराना संभव है। आधुनिक user experience के साथ मेरी सबसे बड़ी शिकायत यह है कि एक ही program की कई windows को एक में मिला दिया जाता है और text हटा दिया जाता है। अगर Firefox की 3 windows खुली हैं, तो taskbar में 3 items भी होने चाहिए, ताकि एक click में मनचाही window पर जाया जा सके। window title में status डालकर उसे किसी monitoring widget की तरह इस्तेमाल करना भी संभव हो जाता है
    • WebSerial के साथ काम करते समय मैंने XP.css इस्तेमाल किया था, और मुझे लगा कि पुराने serial modem settings की याद दिलाने के कारण उसकी aesthetics काफ़ी अच्छी तरह मेल खाती है
      https://web-serial-app.netlify.app/
      स्रोत: https://github.com/tanepiper/web-serial-controller
    • पूरी तरह सहमत
      लेकिन निष्पक्षता से कहूँ तो मैं अब भी Windows 7 को default unthemed UI mode में इस्तेमाल करता हूँ, और मैंने आधुनिक games भी बहुत ज़्यादा नहीं खेले हैं, इसलिए ठीक-ठीक तुलना करना मुश्किल है