cs16.css, una biblioteca CSS basada en la UI de Counter Strike 1.6

 (cs16.samke.me)
1 puntos por GN⁺ 2025-01-25 | 1 comentarios | Compartir por WhatsApp
  • cs16.css es una biblioteca CSS que lleva la sensación de la UI del juego Counter Strike 1.6 a componentes HTML, permitiendo crear rápidamente un estilo retro con solo agregar clases
  • La instalación consiste en agregar en el head del HTML un enlace a la hoja de estilos cs16.min.css desde el CDN de jsDelivr
  • Incluye una amplia variedad de ejemplos básicos de UI, desde botones, campos de entrada, selects, grupos de radio, sliders, diálogos, tooltips, barras de progreso y pestañas
  • Los diálogos usan HTML <dialog> y showModal(), mientras que las pestañas funcionan con una estructura de radio input y label/panel
  • El proyecto está publicado bajo la MIT License e incluye enlaces al repositorio de GitHub y a la página de Samuel, su creador

Biblioteca CSS con estilo Counter Strike 1.6

  • cs16.css es una biblioteca CSS basada en la UI de Counter Strike 1.6
  • La página del proyecto ofrece enlaces al repositorio de GitHub y a perfiles relacionados con el creador
  • Para instalarla, basta con agregar la hoja de estilos del CDN de jsDelivr en la etiqueta head del HTML
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ekmas/…;

Componentes de UI incluidos

  • Botones y elementos básicos de formularios

    • Aplica estilo a los botones con la clase cs-btn, e incluye también un ejemplo de estado disabled
    • Con la clase cs-hr se puede crear un estilo de separador
    • Los checkboxes usan la estructura cs-checkbox, cs-checkbox__label
    • Los campos de entrada usan las clases cs-input, cs-input__label, con ejemplos de valor normal y valor deshabilitado
    • Los selects usan las clases cs-select, cs-select__label, y el ejemplo incluye opciones Volvo, Saab, Opel y Audi

  • UI de selección y ajuste de valores

    • Los grupos de radio se construyen colocando radio inputs y labels dentro de cs-fieldset
    • El ejemplo de radio usa las opciones Elephant, Monkey, Cheetah y Giraffe
    • El slider se arma colocando un input range dentro de la estructura cs-slider
    • El ejemplo de slider incluye valores Dark/Light y la etiqueta Brightness

  • Diálogos, tooltips y barra de progreso

    • Los diálogos usan el elemento HTML <dialog> con la clase cs-dialog
    • Incluye un ejemplo para abrir el diálogo al hacer clic en un botón con document.querySelector('.cs-dialog').showModal();
    • Los botones inferiores del diálogo son OK, Cancel y Apply
    • Los tooltips usan cs-tooltip y el span.text interno, con ejemplos de posición Right, Left, Top y Bottom
    • La barra de progreso coloca un elemento bars dentro de cs-progress-bar y expresa el avance con width: 50%

  • Estructura de pestañas

    • Las pestañas se estructuran colocando radio inputs, labels y paneles dentro de cs-tabs
    • Incluye ejemplos de Tab One, Tab Two y Tab Three, junto con el contenido de cada pestaña

Licencia y creador

  • La biblioteca está publicada bajo la MIT License
  • El creador figura como Samuel

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-01-25
Comentarios en Hacker News

  • Había estado esperando una oportunidad para ampliar aún más la colección
    Hay temas CSS retro como estos: 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

  • Hace poco, viendo a mi hijo jugar Half-Life 2, sentí que cuando los menús y cosas así tienen este estilo y se ven como la UI de un sistema informático real, se siente mucho más realista e inmersivo.
    Puede verse viejo, pero tiene una sensación industrial y realista, y al mismo tiempo es fácil de usar. En cambio, muchos juegos de hoy tienen menús excesivamente estilizados, como con tipografías decorativas floridas, que se sienten irreales, ofrecen una mala experiencia y hasta operar con ellos se vuelve una tarea

    • Si la tendencia actual de la UI es volver todo plano y esconder funciones, arruinando la descubribilidad, que es la esencia de la experiencia de usuario, entonces lo “viejo” no es un defecto sino una función
    • Ni ganas de empezar a hablar de la UI de menús en los juegos modernos
      Hace como un año compré el CoD más reciente para PS5 y no podía entender qué demonios estaba pasando en los menús. Era una estructura caótica imposible de navegar, me estaba volviendo loco, y también pensé que tal vez simplemente ya estoy viejo
    • Dependiendo del estilo o tono del juego, un menú excesivamente estilizado también puede funcionar muy bien
      El verdadero problema es la UI de muchos juegos actuales, completamente plana, genérica, sin color y sin ningún estilo o identidad. Nintendo, por ejemplo, hace bastante de eso
    • El sistema de menús de Crysis 2 o 3 era bueno. De verdad te daba la sensación de estar dentro del nanosuit
    • Las UI antiguas tienen buena affordance. Se nota si un elemento de la UI es interactivo o no, pero las UI “modernas” son bastante malas en eso

  • Está buenísimo. El año pasado reinstalé CS 1.6 después de casi 15 años y últimamente casi todos los días juego 10 a 15 minutos contra bots para despejar la mente
    Para hacerlo más divertido, hasta armé equipos de bots por mi cuenta e incluso hice un torneo completo contra equipos profesionales de alrededor de 2008. También volví a encontrar en un disco duro antiquísimo mapas que había hecho antes; jamás pensé que los jugaría de nuevo acercándome ya a los 40, y estoy agradecido con mi yo del pasado

    • CS siempre fue bueno para despejar la mente. Las partidas rankeadas 5v5 tienen mucha presión, son intensas, duran entre 30 y 45 minutos y también cubren la dosis de contacto humano que uno necesita. Desde que lo dejé hace unos años no he encontrado nada que lo reemplace
    • Tengo muy buenos recuerdos de pasar horas en 2005 jugando mapas kz_. La habilidad de algunas personas era realmente increíble. Extrañamente extraño esa sensación de estar solo en un mapa kz a las 3 de la mañana y escuchar a alguien corriendo por ahí
    • Me vinieron de golpe los recuerdos de jugar mapas personalizados como de_747 con amigos por LAN o por acceso telefónico: https://gamebanana.com/mods/82979
      Incluso ahora, sigo pensando que este mapa es uno de los mapas personalizados con más atmósfera de todos los tiempos. ¿En qué otro mapa puedes hacer roleplay como Gary Oldman o Harrison Ford?
    • Yo tampoco he tocado CS 1.6 en 15 o 16 años, pero volver a jugarlo suena divertido. Me pregunto si correrá en Mac M1 o si hará falta una máquina virtual. También agradecería recomendaciones de material para leer sobre cómo configurar los bots

  • Técnicamente, ¿no era esto más bien la UI original de Steam que una UI exclusiva de Counter-Strike?

    • Sí. Pero originalmente Steam se hizo para gestionar las actualizaciones de Counter-Strike y el sistema antitrampas, si mal no recuerdo, VAC
      También era la época en la que tener un WON ID bajo, el equivalente al SteamID de hoy, se veía como una medalla. Era como tener un ID bajo en Slashdot
    • Sí. El cliente de Steam originalmente estaba construido sobre la misma librería VGUI que usaban los juegos de Valve, y en ese momento compartía el mismo estilo que HL1/CS, etc.
    • Se añadió a Half-Life alrededor de marzo de 2000, y poco después también llegó a Counter-Strike. No estoy seguro de cuándo salió Steam por primera vez, pero creo que ya tenía beta desde 2002
    • Incluso ahora, si aprietas en Steam un botón poco común o provocas un error raro, todavía queda la sensación de que en algún lado va a saltar una ventana con este estilo
      Es parecido a cómo hasta el año pasado en Windows 11 a veces aparecían cuadros de diálogo con estilo de Windows 3.x, y todavía quedan algunos restos de la era Windows 9x

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

    • Esto también usa element para la barra de progreso

  • Más lectura sobre VGUI: https://developer.valvesoftware.com/wiki/Category:VGUI
    Como dato curioso, en CS 1.6 podías volver a la vieja WON UI poniendo setinfo "_vgui_menus" "0" en config.cfg o en la consola, o desde el menú en “Options > Multiplayer > Advanced > Buy menu type > VGUI Menus”

    • Sí. El menú basado en texto era el que usaba Half-Life cuando salió en 1998
      Counter-Strike también usó ese mismo menú basado en texto en 1999, y recién en 2000 el motor se actualizó para incluir VGUI. Supongo que Counter-Strike dejó el menú viejo para quienes preferían esa forma

  • Creo que esto no es tanto CS 1.6 en sí, sino la UI de Steam, o sea la UI del navegador de servidores y la configuración
    Aunque no recuerdo bien cómo se veía antes de la integración con Steam

    • CS 1.6 era exclusivo de Steam. Recuerdo que postergué registrarme bastante tiempo porque no me gustaba la idea de Steam como concepto, pero al final cedí
      Todavía tengo un Steam ID de 6 dígitos, que en algún momento parecía tener cierto significado, aunque en realidad no significaba mucho. El navegador de servidores de CS 1.5 o anterior estaba integrado dentro del menú de la aplicación, y esto no es Counter-Strike sino realmente la UI de Steam. En esa época también venían integrados juegos como Go, que podías jugar con gente de tu lista de amigos
    • Esto es VGUI2, hecho para el motor Source, luego reutilizado en Steam y después retroportado al motor GoldSource cuando los juegos se lanzaron en Steam
    • En esa época Steam era casi un lanzador de CS 1.6

  • Todos corren más rápido cuando llevan cuchillo

    • Es un poco gracioso que eso siga siendo cierto incluso en juegos modernos como Call of Duty: Black Ops 6. Aunque no solo con cuchillo, sino con armas cuerpo a cuerpo en general
    • ¡El corazón late! ¡Las manos tiemblan!

  • Genial. No soy gamer, pero he visto a mi hijo jugar varios juegos, y me gustó que esta UI no se siente buena por pertenecer a un juego en específico, sino porque es limpia y diferente
    Me pregunto si habrá otras librerías CSS distintas que se puedan usar en una página

  • Los 90 y principios de los 2000 fueron la época dorada de las UI

    • En esos tiempos, las empresas tecnológicas querían convertir a la computadora en un objeto común del hogar, así que hacían muchísimas pruebas con usuarios, y como la capacidad de descubrimiento se volvió importante, la experiencia de usuario también avanzó muchísimo.
      Pero desde hace unos 10 años empezaron a tirar toda esa investigación porque las capturas de pantalla para marketing se veían más simples, favoreciendo UI minimalistas, limpias, planas y “elegantes”. La capacidad de elección y la personalización desaparecieron, y Apple y Microsoft pasaron a decidir cómo debía verse el escritorio porque alguien podría confundirse si abría el panel de opciones. Odio casi todos los aspectos de la experiencia de usuario de macOS, el Dock es terrible, y hay demasiados valores predeterminados extraños. Ocultar las barras de desplazamiento, la aceleración del puntero y la inversión de la rueda del mouse no son funciones, son errores. Windows al menos permite, con software de terceros, hacer que la barra de tareas y el menú Inicio se vean y se sientan como en la época de Win2K. Mi mayor queja sobre la experiencia de usuario moderna es agrupar varias ventanas de un mismo programa en una sola y quitar el texto. Si hay 3 ventanas de Firefox abiertas, también debería haber 3 elementos en la barra de tareas, para poder ir a la que quiero con un solo clic. Además, eso permite usar el título de la ventana para mostrar estado y vigilar algo como si fuera un widget
    • Cuando trabajé con WebSerial usé XP.css, y me pareció que encajaba bastante bien en lo estético porque me recordaba a las antiguas configuraciones de módem serial
      https://web-serial-app.netlify.app/
      Código fuente: https://github.com/tanepiper/web-serial-controller
    • Totalmente de acuerdo
      Aunque, para ser justos, yo todavía uso Windows 7 en el modo de UI básico sin tema, y tampoco he jugado muchos juegos modernos, así que me cuesta compararlo bien