cs16.css, bibliothèque CSS basée sur l’interface de Counter Strike 1.6

 (cs16.samke.me)
1 points par GN⁺ 2025-01-25 | 1 commentaires | Partager sur WhatsApp
  • cs16.css est une bibliothèque CSS qui applique l’ambiance de l’interface de jeu de Counter Strike 1.6 à des composants HTML, permettant de créer rapidement un style rétro simplement en ajoutant des classes
  • L’installation consiste à ajouter le lien de la feuille de style cs16.min.css depuis le CDN jsDelivr dans le head HTML
  • Des exemples complets d’UI de base sont inclus, allant des boutons, champs de saisie, sélecteurs, groupes radio, sliders, dialogues, infobulles, barres de progression jusqu’aux onglets
  • Les dialogues utilisent le HTML <dialog> et showModal(), et les onglets fonctionnent avec une structure composée de radio input et de label/panel
  • Le projet est publié sous licence MIT, avec un dépôt GitHub et une page du créateur Samuel liés ensemble

Bibliothèque CSS au style Counter Strike 1.6

  • cs16.css est une bibliothèque CSS basée sur l’interface de Counter Strike 1.6
  • La page du projet fournit des liens vers le dépôt GitHub et vers le créateur
  • Pour l’installation, il suffit d’ajouter la feuille de style du CDN jsDelivr dans la balise head HTML
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ekmas/…;

Composants UI fournis

  • Boutons et éléments de formulaire de base

    • Le style des boutons s’applique avec la classe cs-btn, et un exemple d’état disabled est également inclus
    • La classe cs-hr permet de créer un style de séparateur
    • Les cases à cocher utilisent la structure cs-checkbox, cs-checkbox__label
    • Les champs de saisie utilisent les classes cs-input, cs-input__label, avec des exemples de valeur normale et de champ désactivé
    • Les sélecteurs utilisent les classes cs-select, cs-select__label, et l’exemple comprend les options Volvo, Saab, Opel et Audi

  • UI de sélection et ajustement de valeurs

    • Les groupes radio consistent à placer des radio input et des labels à l’intérieur de cs-fieldset
    • L’exemple radio utilise les choix Elephant, Monkey, Cheetah et Giraffe
    • Les sliders sont construits en plaçant un input range dans la structure cs-slider
    • L’exemple de slider comprend les valeurs Dark/Light et le libellé Brightness

  • Dialogues, infobulles et barre de progression

    • Les dialogues utilisent un HTML <dialog> avec la classe cs-dialog
    • Un exemple est inclus pour ouvrir le dialogue au clic sur un bouton avec document.querySelector('.cs-dialog').showModal();
    • Les boutons en bas du dialogue sont composés de OK, Cancel et Apply
    • Les infobulles utilisent cs-tooltip et un span.text interne, avec des exemples de positionnement Right, Left, Top et Bottom
    • La barre de progression place un élément bars dans cs-progress-bar et représente l’état d’avancement avec width: 50%

  • Structure des onglets

    • Les onglets utilisent une structure où radio input, label et panel sont placés dans cs-tabs
    • Des exemples Tab One, Tab Two, Tab Three et le contenu de chaque onglet sont inclus

Licence et créateur

  • La bibliothèque est publiée sous licence MIT
  • Le créateur est indiqué comme Samuel

À lire aussi

1 commentaires

 
GN⁺ 2025-01-25
Avis de Hacker News

  • J’attendais une occasion d’étoffer encore la collection
    Dans les thèmes CSS rétro, on trouve notamment : 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

  • Récemment, en regardant mon fils jouer à Half-Life 2, je me suis dit que quand les menus et autres éléments ont ce style et ressemblent à une vraie UI de système informatique, c’est bien plus réaliste et immersif.
    Ça peut paraître vieillot, mais il y a un côté industriel et authentique, tout en restant facile à utiliser. À l’inverse, beaucoup de jeux actuels ont des menus trop stylisés, façon lettrines décoratives florales, ce qui les rend irréalistes, dégrade l’expérience, et fait de la manipulation elle-même une corvée.

    • Si la tendance actuelle des UI consiste à tout aplatir et à cacher les fonctions, au point de ruiner la découvrabilité, qui est au cœur de l’expérience utilisateur, alors le « vieillot » n’est pas un défaut mais une fonctionnalité.
    • Je n’ai même pas envie de commencer à parler des menus UI des jeux modernes.
      Il y a environ un an, j’ai acheté le dernier CoD sur PS5, et je n’arrivais pas à comprendre ce qui se passait dans les menus. C’était une structure en bazar impossible à parcourir, au point de me rendre fou — ou alors c’est juste que je deviens vieux.
    • Selon le style ou le ton du jeu, des menus très stylisés peuvent aussi très bien fonctionner.
      Le vrai problème, c’est l’UI de nombreux jeux actuels : totalement plate, générique, sans couleur, sans aucun style ni identité. Nintendo, par exemple, fait pas mal ce genre de choses.
    • J’aimais bien le système de menus de Crysis 2 ou 3, je ne sais plus. Il donnait vraiment l’impression d’être à l’intérieur de la nanocombinaison.
    • Les vieilles UI ont de bonnes affordances. On voit si un élément d’UI est interactif ou non, alors que les UI « modernes » sont assez mauvaises sur ce point.

  • Très bon. L’an dernier, j’ai réinstallé CS 1.6 pour la première fois depuis presque 15 ans, et maintenant je joue presque tous les jours 10 à 15 minutes contre des bots pour me vider la tête.
    Pour ajouter un peu de fun, j’ai même créé mes propres équipes de bots et monté tout un tournoi contre des équipes pro d’environ 2008. J’ai aussi retrouvé sur un très vieux disque dur une map que j’avais faite à l’époque ; je n’aurais jamais imaginé y rejouer à presque 40 ans, et je remercie mon moi du passé.

    • CS a toujours été parfait pour se vider la tête. Les parties classées en 5v5 sont stressantes, intenses, durent environ 30 à 45 minutes, et apportent juste la dose de contact humain nécessaire. Depuis que j’ai arrêté il y a quelques années, je n’ai rien trouvé pour le remplacer.
    • J’ai de bons souvenirs de 2005, quand je passais des heures sur des maps kz_. Le niveau de certaines personnes était vraiment incroyable. Le fait d’être seul sur une map kz à 3 h du matin et d’entendre quelqu’un courir me manque d’une drôle de façon.
    • Ça me fait remonter des souvenirs de parties avec des amis en LAN ou en connexion RTC sur des maps custom comme de_747 : https://gamebanana.com/mods/82979
      Je considère encore cette map comme l’une des maps custom les plus atmosphériques de tous les temps. Où d’autre peut-on jouer à faire Gary Oldman ou Harrison Ford ?
    • Moi aussi je n’ai pas touché à CS 1.6 depuis 15 ou 16 ans, mais ça pourrait être amusant de m’y remettre. Je me demande s’il tourne sur Mac M1, ou s’il faut une machine virtuelle. J’aimerais aussi qu’on me recommande de quoi lire sur la configuration des bots et la façon de les paramétrer.

  • Techniquement, ce n’est pas vraiment l’UI propre à Counter-Strike, mais plutôt l’UI Steam d’origine, non ?

    • Oui. Cela dit, Steam avait à l’origine été créé pour gérer les mises à jour de Counter-Strike et le système anti-triche, VAC si ma mémoire est bonne.
      C’était aussi l’époque où avoir un WON ID — l’actuel SteamID — peu élevé était vu comme une médaille. Un peu comme un identifiant de compte Slashdot bas.
    • Oui. Le client Steam a été construit à l’origine sur la même bibliothèque VGUI que celle utilisée dans les jeux Valve, et il reprenait à l’époque le même style que HL1/CS, etc.
    • Ça a été ajouté à Half-Life vers mars 2000, puis intégré à Counter-Strike peu après. Je ne sais pas exactement quand Steam est sorti pour la première fois, mais il me semble qu’il y avait une bêta dès 2002.
    • Même aujourd’hui, quand on clique sur un bouton peu courant dans Steam ou qu’on déclenche une erreur rare, on a encore l’impression qu’une fenêtre dans ce style pourrait surgir quelque part.
      C’est un peu comme Windows 11, où jusqu’à l’an dernier apparaissaient encore parfois des boîtes de dialogue style Windows 3.x, avec encore quelques vestiges de l’époque Windows 9x.

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

    • Celui-ci utilise aussi un element pour la barre de progression.

  • Pour en lire davantage sur VGUI : https://developer.valvesoftware.com/wiki/Category:VGUI
    Fait amusant : dans CS 1.6, on pouvait revenir à l’ancienne UI WON en mettant setinfo "_vgui_menus" "0" dans config.cfg ou dans la console, ou via le menu « Options > Multiplayer > Advanced > Buy menu type > VGUI Menus ».

    • Oui. Le menu en mode texte était celui utilisé par Half-Life à sa sortie en 1998.
      Counter-Strike utilisait aussi ce même menu textuel en 1999, et ce n’est qu’en 2000 que le moteur a été mis à jour pour inclure VGUI. Counter-Strike a sans doute conservé l’ancien menu pour les gens qui préféraient cette approche.

  • Je pense que ce n’est pas vraiment CS 1.6 lui-même, mais plutôt l’UI Steam, c’est-à-dire celle du navigateur de serveurs et des paramètres.
    Cela dit, je ne me souviens plus très bien de son apparence avant l’intégration de Steam.

    • CS 1.6 était exclusivement sur Steam. Je me souviens avoir repoussé l’inscription pendant un bon moment parce que je n’aimais pas le concept de Steam, avant de finir par céder.
      J’ai encore un Steam ID à 6 chiffres ; à une époque, ça semblait vouloir dire quelque chose, même si en réalité pas grand-chose. Le navigateur de serveurs de CS 1.5 et des versions antérieures était intégré dans le menu de l’application, et ici il s’agit bien de l’UI Steam, pas de Counter-Strike. À cette époque, il y avait même des jeux intégrés comme le go, auxquels on pouvait jouer avec les personnes de sa liste d’amis.
    • C’est VGUI2, créé pour le moteur Source, puis réutilisé dans Steam avant d’être rétroporté vers le moteur GoldSource quand les jeux sont sortis sur Steam.
    • À l’époque, Steam était presque un launcher CS 1.6.

  • Tout le monde court plus vite avec un couteau à la main.

    • C’est assez drôle que ce soit encore le cas dans des jeux modernes comme Call of Duty: Black Ops 6. Pas seulement avec les couteaux d’ailleurs, mais avec les armes de mêlée en général.
    • Le cœur bat ! Les mains tremblent !

  • Super. Je ne suis pas gamer, mais j’ai vu mon fils jouer à plusieurs jeux, et ce que j’ai aimé, ce n’est pas que cette UI appartienne à un jeu en particulier, mais qu’elle soit propre et différente.
    Je me demande s’il existe d’autres bibliothèques CSS originales de ce genre qu’on pourrait utiliser sur une page.

  • Les années 90 et le début des années 2000 ont été l’âge d’or de l’UI.

    • À cette époque, les entreprises tech cherchaient à faire de l’ordinateur un objet domestique courant, donc elles faisaient énormément de tests utilisateur, et l’accessibilité à la découverte est devenue importante, ce qui a aussi fait beaucoup progresser l’expérience utilisateur.
      Mais il y a environ dix ans, parce que les captures d’écran marketing semblaient plus simples, on a commencé à jeter tout ce travail au profit d’UI minimalistes, propres, plates et « élégantes ». Les choix et la personnalisation ont disparu, et Apple comme Microsoft se sont mis à décider à quoi devait ressembler le bureau, au motif qu’un panneau d’options pourrait dérouter quelqu’un. Je déteste presque tous les aspects de l’expérience utilisateur de macOS, le Dock est épouvantable, et il y a beaucoup trop de réglages par défaut bizarres. Masquer les barres de défilement, l’accélération du pointeur, l’inversion de la molette de défilement : ce ne sont pas des fonctionnalités, ce sont des bugs. Windows permet au moins, avec des logiciels tiers, de donner à la barre des tâches et au menu Démarrer l’apparence et le comportement de l’époque Win2K. Mon plus gros grief envers l’expérience utilisateur moderne, c’est de regrouper plusieurs fenêtres d’un même programme en une seule entrée et de supprimer le texte. Si trois fenêtres Firefox sont ouvertes, il devrait y avoir trois éléments dans la barre des tâches, pour pouvoir accéder à la fenêtre voulue en un clic. Cela permet aussi d’utiliser le titre d’une fenêtre pour y mettre un état, comme un widget de surveillance.
    • Quand j’ai travaillé avec WebSerial, j’ai utilisé XP.css, et ça m’a rappelé les anciens paramètres de modem série, donc j’ai trouvé que l’esthétique collait plutôt bien.
      https://web-serial-app.netlify.app/
      Source : https://github.com/tanepiper/web-serial-controller
    • Entièrement d’accord.
      Cela dit, pour être honnête, j’utilise encore Windows 7 avec l’UI par défaut sans thème, et je n’ai pas beaucoup joué à des jeux modernes non plus, donc il m’est difficile de faire une vraie comparaison.