cs16.css, eine CSS-Bibliothek auf Basis der Counter-Strike-1.6-UI

 (cs16.samke.me)
1 Punkte von GN⁺ 2025-01-25 | 1 Kommentare | Auf WhatsApp teilen
  • cs16.css ist eine CSS-Bibliothek, die HTML-Komponenten den Look der Spiel-UI von Counter Strike 1.6 verleiht; durch einfaches Hinzufügen von Klassen lässt sich schnell ein Retro-Stil erzeugen
  • Die Installation erfolgt, indem im HTML-head ein Stylesheet-Link zu cs16.min.css über das jsDelivr-CDN hinzugefügt wird
  • Umfangreiche Beispiele für grundlegende UI-Elemente sind enthalten, darunter Buttons, Eingabefelder, Selects, Radio-Gruppen, Slider, Dialoge, Tooltips, Fortschrittsbalken und Tabs
  • Dialoge verwenden HTML-<dialog> und showModal(), Tabs funktionieren mit einer Struktur aus radio input sowie Label/Panel
  • Das Projekt wird unter der MIT License veröffentlicht; verlinkt sind sowohl das GitHub-Repository als auch die Samuel-Seite

CSS-Bibliothek im Counter-Strike-1.6-Stil

  • cs16.css ist eine CSS-Bibliothek auf Basis der Counter-Strike-1.6-UI
  • Die Projektseite bietet Links zum GitHub-Repository und zum Ersteller
  • Für die Installation muss lediglich das jsDelivr-CDN-Stylesheet im HTML-head-Tag ergänzt werden
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ekmas/…;

Verfügbare UI-Komponenten

  • Buttons und grundlegende Formularelemente

    • Mit der Klasse cs-btn wird der Button-Stil angewendet; auch ein Beispiel für den disabled-Zustand ist enthalten
    • Mit der Klasse cs-hr lässt sich ein Trennlinien-Stil erzeugen
    • Checkboxen verwenden die Struktur cs-checkbox und cs-checkbox__label
    • Eingabefelder nutzen die Klassen cs-input und cs-input__label; Beispiele zeigen sowohl normale als auch deaktivierte Eingabefelder
    • Selects verwenden die Klassen cs-select und cs-select__label; das Beispiel besteht aus den Optionen Volvo, Saab, Opel und Audi

  • Auswahl-UI und Werteanpassung

    • Radio-Gruppen werden umgesetzt, indem radio inputs und Labels innerhalb von cs-fieldset platziert werden
    • Das Radio-Beispiel nutzt die Auswahlmöglichkeiten Elephant, Monkey, Cheetah und Giraffe
    • Slider werden mit einem range-input innerhalb der Struktur cs-slider aufgebaut
    • Das Slider-Beispiel enthält die Werte Dark/Light und das Label Brightness

  • Dialoge, Tooltips und Fortschrittsbalken

    • Dialoge verwenden HTML-<dialog> mit der Klasse cs-dialog
    • Enthalten ist ein Beispiel, bei dem ein Dialog per Button-Klick mit document.querySelector('.cs-dialog').showModal(); geöffnet wird
    • Die Buttons im unteren Bereich des Dialogs bestehen aus OK, Cancel und Apply
    • Tooltips verwenden cs-tooltip und ein internes span.text; Beispiele zeigen die Positionen Right, Left, Top und Bottom
    • Der Fortschrittsbalken nutzt innerhalb von cs-progress-bar ein bars-Element und stellt den Fortschritt mit width: 50% dar

  • Tab-Aufbau

    • Tabs sind so aufgebaut, dass innerhalb von cs-tabs radio inputs, Labels und Panels platziert werden
    • Enthalten sind die Beispiele Tab One, Tab Two, Tab Three sowie die jeweiligen Tab-Inhalte

Lizenz und Ersteller

  • Die Bibliothek wird unter der MIT License veröffentlicht
  • Als Ersteller ist Samuel angegeben

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-01-25
Meinungen auf Hacker News

  • Ich habe auf eine Gelegenheit gewartet, die Sammlung weiter auszubauen.
    Als Retro-CSS-Themes gibt es unter anderem: 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

  • Kürzlich habe ich meinem Sohn beim Spielen von Half-Life 2 zugesehen und gemerkt, dass Menüs und ähnliche Dinge in diesem Stil viel realistischer und immersiver wirken, wenn sie wie eine echte Computer-System-UI aussehen.
    Sie mögen altbacken wirken, haben aber ein industrielles, realitätsnahes Gefühl und sind gleichzeitig leicht zu bedienen. Im Gegensatz dazu haben viele Spiele heute übermäßig stilisierte Menüs, etwa mit blumigen Zierschriften; das wirkt unrealistisch, sorgt für eine schlechte Erfahrung, und die Bedienung selbst wird zur Arbeit.

    • Wenn der heutige UI-Trend, alles flach zu machen und Funktionen zu verstecken, die Auffindbarkeit ruiniert, die den Kern der User Experience ausmacht, dann ist „altmodisch“ kein Makel, sondern ein Feature.
    • Über Menü-UIs moderner Spiele will ich gar nicht erst anfangen.
      Vor etwa einem Jahr habe ich das neueste CoD für PS5 gekauft, und ich konnte nicht begreifen, was in den Menüs überhaupt vor sich ging. Es war eine nicht navigierbare chaotische Struktur, die mich wahnsinnig machte; vielleicht werde ich aber auch einfach alt.
    • Je nach Stil oder Ton eines Spiels können auch stark stilisierte Menüs gut passen.
      Das eigentliche Problem ist die völlig flache, generische, farblose UI ohne jeden Stil oder jede Identität, die man in vielen heutigen Spielen sieht. Nintendo macht zum Beispiel ziemlich viel davon.
    • Das Menüsystem von Crysis 2 oder 3 mochte ich. Es vermittelte wirklich das Gefühl, im Nanosuit zu stecken.
    • Alte UIs haben gute Affordances. Man sieht, ob UI-Elemente interaktiv sind oder nicht; „moderne“ UIs sind in dieser Hinsicht ziemlich miserabel.

  • Sehr schön. Letztes Jahr habe ich CS 1.6 nach fast 15 Jahren wieder installiert, und inzwischen spiele ich fast täglich 10 bis 15 Minuten gegen Bots, um den Kopf freizubekommen.
    Um es interessanter zu machen, habe ich sogar eigene Bot-Teams erstellt und ein komplettes Turnier gegen Profiteams aus der Zeit um 2008 gebaut. Ich habe auch Maps, die ich früher gemacht hatte, auf einer sehr alten Festplatte wiedergefunden. Ich hätte nie gedacht, dass ich sie mit fast 40 noch einmal spielen würde, und bin meinem früheren Ich dankbar.

    • CS war immer gut, um den Kopf freizubekommen. Ranked-5v5-Spiele sind stressig und intensiv, dauern etwa 30 bis 45 Minuten und decken auch genau das nötige Maß an Kontakt mit Menschen ab. Seit ich vor ein paar Jahren aufgehört habe, habe ich keinen Ersatz dafür gefunden.
    • Ich habe gute Erinnerungen daran, 2005 stundenlang kz_-Maps gespielt zu haben. Das Können mancher Leute war wirklich erstaunlich. Dieses Gefühl, um 3 Uhr morgens allein auf einer kz-Map zu sein und dann jemanden herumspringen zu hören, vermisse ich auf seltsame Weise.
    • Erinnerungen daran kommen hoch, wie wir mit Freunden per LAN oder Dial-up Custom-Maps wie de_747 gespielt haben: https://gamebanana.com/mods/82979
      Ich halte diese Map bis heute für eine der atmosphärischsten Custom-Maps überhaupt. Wo sonst kann man Gary Oldman oder Harrison Ford nachspielen?
    • Ich habe CS 1.6 ebenfalls 15 bis 16 Jahre lang nicht angerührt, aber es wieder auszuprobieren, wäre wohl spaßig. Ich frage mich, ob es auf einem Mac M1 läuft oder ob man eine virtuelle Maschine braucht. Empfehlungen für lesenswerte Ressourcen zur Bot-Einrichtung und Konfiguration wären auch willkommen.

  • Technisch gesehen ist das doch nicht so sehr eine Counter-Strike-spezifische UI, sondern ursprünglich die Steam UI, oder?

    • Stimmt. Allerdings wurde Steam ursprünglich entwickelt, um Counter-Strike-Updates und das Anti-Cheat-System zu verwalten, wenn ich mich richtig erinnere VAC.
      Das war auch die Zeit, in der eine niedrige WON ID, die heutige SteamID, wie ein Orden galt. So ähnlich wie eine niedrige Slashdot-Account-ID.
    • Stimmt. Der Steam-Client wurde ursprünglich auf derselben VGUI-Bibliothek aufgebaut, die in Valves Spielen verwendet wurde, und hatte damals denselben Stil wie HL1/CS usw.
    • Sie wurde wohl im März 2000 zu Half-Life hinzugefügt und kurz darauf auch in Counter-Strike integriert. Ich bin mir nicht sicher, wann Steam erstmals erschien, aber ich glaube, ab 2002 gab es eine Beta.
    • Selbst heute habe ich noch das Gefühl, dass irgendwo ein Fenster in diesem Stil auftauchen könnte, wenn man in Steam auf einen weniger häufigen Button klickt oder einen seltenen Fehler auslöst.
      Ähnlich wie in Windows 11 bis letztes Jahr gelegentlich noch Dialoge im Stil von Windows 3.x auftauchten und noch ein paar Überreste aus der Windows-9x-Zeit vorhanden sind.

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

    • Auch das verwendet ein element für den Fortschrittsbalken.

  • Mehr Lesestoff zu VGUI: https://developer.valvesoftware.com/wiki/Category:VGUI
    Interessanterweise konnte man in CS 1.6 zur alten WON UI zurückkehren, indem man setinfo "_vgui_menus" "0" in die config.cfg oder die Konsole eintrug, oder über „Options > Multiplayer > Advanced > Buy menu type > VGUI Menus“ im Menü.

    • Genau. Die textbasierten Menüs waren das, was Half-Life bei seiner Veröffentlichung 1998 verwendete.
      Counter-Strike nutzte 1999 ebenfalls dieselben textbasierten Menüs, und erst im Jahr 2000 wurde die Engine aktualisiert, um VGUI einzubinden. Vermutlich ließ Counter-Strike die alten Menüs für Leute drin, die diese Variante bevorzugten.

  • Ich denke, das ist weniger CS 1.6 selbst als vielmehr die Steam UI, also die UI für Server-Browser und Einstellungen.
    Allerdings erinnere ich mich nicht mehr gut daran, wie es vor der Steam-Integration aussah.

    • CS 1.6 war Steam-exklusiv. Ich erinnere mich, dass ich die Registrierung ziemlich lange hinausgezögert habe, weil mir das Konzept Steam nicht gefiel, und mich am Ende doch beugte.
      Ich habe immer noch eine sechsstellige Steam-ID; eine Zeit lang schien das irgendwie etwas zu bedeuten, tat es aber eigentlich nicht. Der Server-Browser von CS 1.5 und älter war in das Anwendungsmenü eingebettet, und das hier ist tatsächlich Steam UI, nicht Counter-Strike. Damals war sogar ein Spiel wie Go eingebaut, das man mit Leuten aus der Freundesliste spielen konnte.
    • Das ist VGUI2, das für die Source Engine entwickelt, in Steam wiederverwendet und dann in die GoldSource-Engine zurückportiert wurde, als die Spiele über Steam veröffentlicht wurden.
    • Damals war Steam im Grunde ein CS-1.6-Launcher.

  • Mit dem Messer in der Hand laufen alle schneller.

    • Es ist irgendwie witzig, dass das selbst in modernen Spielen wie Call of Duty: Black Ops 6 immer noch so ist. Nicht nur bei Messern, sondern bei Nahkampfwaffen generell.
    • Das Herz schlägt! Die Hände zittern!

  • Cool. Ich bin zwar kein Gamer, aber ich habe meinem Sohn bei verschiedenen Spielen zugesehen, und mir gefiel, dass diese UI nicht einfach zu einem bestimmten Spiel gehört, sondern aufgeräumt und anders ist.
    Ich frage mich, ob es noch andere ungewöhnliche CSS-Bibliotheken gibt, die man auf einer Seite einsetzen kann.

  • Die 90er und frühen 2000er waren die Blütezeit der UI.

    • Damals versuchten Tech-Unternehmen, Computer zu einem gewöhnlichen Haushaltsgegenstand zu machen, deshalb wurde enorm viel User Testing betrieben, und weil Auffindbarkeit wichtig wurde, machte auch die User Experience große Fortschritte.
      Vor etwa zehn Jahren begann man dann aber, all diese Forschung über Bord zu werfen, weil minimalistische, saubere, flache und „elegante“ UIs auf Marketing-Screenshots einfacher wirkten. Auswahlmöglichkeiten und Anpassbarkeit verschwanden, und Apple und Microsoft durften entscheiden, wie der Desktop auszusehen hat, nur weil jemand verwirrt sein könnte, wenn er ein Optionspanel öffnet. Ich hasse fast jeden Teil der macOS-User-Experience, das Dock ist furchtbar, und es gibt viel zu viele seltsame Defaults. Scrollleisten ausblenden, Pointer Acceleration und invertiertes Mausrad-Scrolling sind keine Features, sondern Bugs. Bei Windows kann man die Taskleiste und das Startmenü wenigstens mit Drittsoftware wieder so aussehen und sich so anfühlen lassen wie zu Win2K-Zeiten. Mein größter Ärger mit moderner User Experience ist, dass mehrere Fenster eines Programms zu einem zusammengelegt und der Text entfernt werden. Wenn drei Firefox-Fenster geöffnet sind, sollte es auch drei Taskleisten-Einträge geben, damit man mit einem Klick zum gewünschten Fenster kommt. Dann kann man auch Statusinformationen in den Fenstertitel schreiben und es wie ein Widget zur Überwachung von irgendetwas verwenden.
    • Als ich mit WebSerial gearbeitet habe, habe ich XP.css verwendet; es erinnerte mich an alte Einstellungen für serielle Modems, daher fand ich es ästhetisch ziemlich passend.
      https://web-serial-app.netlify.app/
      Quelle: https://github.com/tanepiper/web-serial-controller
    • Stimme voll zu.
      Fairerweise muss ich aber sagen, dass ich Windows 7 immer noch im standardmäßigen, themenlosen UI-Modus nutze und auch nicht viele moderne Spiele gespielt habe, daher ist ein richtiger Vergleich schwierig.