cs16.css, biblioteca CSS baseada na UI do Counter Strike 1.6

 (cs16.samke.me)
1 pontos por GN⁺ 2025-01-25 | 1 comentários | Compartilhar no WhatsApp
  • cs16.css é uma biblioteca CSS que aplica a aparência da UI do Counter Strike 1.6 a componentes HTML, permitindo criar rapidamente um estilo retrô apenas adicionando classes
  • A instalação é feita adicionando o link da folha de estilo cs16.min.css do jsDelivr CDN no head do HTML
  • Inclui uma ampla variedade de exemplos de UI básica, como botões, campos de entrada, select, grupo de rádio, slider, diálogo, tooltip, barra de progresso e abas
  • O diálogo usa HTML <dialog> e showModal(), e as abas funcionam com a estrutura de radio input e label/panel
  • O projeto é disponibilizado sob a MIT License e traz links para o repositório no GitHub e para a página do criador Samuel

Biblioteca CSS no estilo Counter Strike 1.6

  • cs16.css é uma biblioteca CSS baseada na UI do Counter Strike 1.6
  • A página do projeto oferece links para o repositório no GitHub e para o criador
  • Para instalar, basta adicionar a folha de estilo do jsDelivr CDN na tag head do HTML
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ekmas/…;

Componentes de UI oferecidos

  • Botões e elementos básicos de formulário

    • Aplica o estilo de botão com a classe cs-btn, e também inclui exemplo do estado disabled
    • É possível criar o estilo de linha divisória com a classe cs-hr
    • O checkbox usa a estrutura cs-checkbox, cs-checkbox__label
    • Os campos de entrada usam as classes cs-input, cs-input__label, com exemplos de valor normal e valor disabled
    • O select usa as classes cs-select, cs-select__label, e o exemplo é composto pelas opções Volvo, Saab, Opel e Audi

  • UI de seleção e ajuste de valores

    • O grupo de rádio posiciona radio input e label dentro de cs-fieldset
    • O exemplo de rádio usa as opções Elephant, Monkey, Cheetah e Giraffe
    • O slider é montado colocando um input range dentro da estrutura cs-slider
    • O exemplo de slider inclui os valores Dark/Light e o rótulo Brightness

  • Diálogo, tooltip e barra de progresso

    • O diálogo usa HTML <dialog> com a classe cs-dialog
    • Inclui um exemplo que abre o diálogo ao clicar no botão com document.querySelector('.cs-dialog').showModal();
    • Os botões na parte inferior do diálogo são OK, Cancel e Apply
    • O tooltip usa cs-tooltip e o span.text interno, com exemplos de posicionamento Right, Left, Top e Bottom
    • A barra de progresso coloca o elemento bars dentro de cs-progress-bar e representa o progresso com width: 50%

  • Estrutura de abas

    • As abas usam uma estrutura com radio input, label e panel dentro de cs-tabs
    • Inclui exemplos de Tab One, Tab Two e Tab Three, além do conteúdo de cada aba

Licença e criador

  • A biblioteca é disponibilizada sob a MIT License
  • O criador é indicado como Samuel

Leituras relacionadas

1 comentários

 
GN⁺ 2025-01-25
Opiniões no Hacker News

  • Eu estava esperando uma oportunidade para aumentar a coleção
    Existem estes temas CSS retrô: 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

  • Recentemente, vendo meu filho jogar Half-Life 2, percebi que coisas como os menus são nesse estilo e parecem muito mais realistas e imersivas quando dão a impressão de uma UI de sistema de computador real.
    Pode até parecer antiquado, mas tem uma sensação industrial e real, e ao mesmo tempo é fácil de usar. Em contraste, muitos jogos de hoje têm menus excessivamente estilizados, como letras decorativas floridas, que parecem irreais, oferecem uma experiência ruim e fazem a própria operação virar trabalho

    • Se a tendência atual de UI é deixar tudo plano e esconder funcionalidades, estragando a descobribilidade, que é central para a experiência do usuário, então o “antigo” não é um defeito, é um recurso
    • Nem quero começar a falar da UI de menus dos jogos modernos
      Há cerca de um ano comprei o CoD mais recente para PS5 e não conseguia entender o que diabos estava acontecendo no menu. Era uma estrutura bagunçada impossível de navegar, me deixou com a sensação de estar enlouquecendo, e talvez eu só esteja ficando velho mesmo
    • Dependendo do estilo ou do tom do jogo, menus excessivamente estilizados também podem combinar bem
      O verdadeiro problema é a UI totalmente plana, genérica, sem cor e sem qualquer estilo ou identidade que aparece em muitos jogos de hoje. Por exemplo, a Nintendo faz bastante isso
    • Gostei do sistema de menus de Crysis 2 ou 3, não lembro qual. Ele realmente dava a sensação de estar dentro do nanotraje
    • UIs antigas têm boa affordance. Dá para ver se um elemento da UI é interativo ou não; já as UIs “modernas” são bem ruins nesse aspecto

  • Muito bom. No ano passado reinstalei CS 1.6 depois de quase 15 anos, e hoje em dia jogo quase todos os dias por 10 a 15 minutos contra bots para esvaziar a cabeça
    Para deixar mais divertido, até criei meus próprios times de bots e montei um torneio inteiro contra equipes profissionais de por volta de 2008. Também reencontrei, em um disco rígido muito antigo, mapas que eu tinha feito no passado; nunca imaginei que ainda os jogaria perto dos 40 anos, e sou grato ao meu eu do passado

    • CS sempre foi bom para esvaziar a cabeça. Partidas ranqueadas 5v5 são intensas, com muita pressão, duram uns 30 a 45 minutos e também suprem a dose necessária de contato humano. Desde que parei há alguns anos, não encontrei nada que substituísse isso
    • Tenho boas lembranças de passar horas em mapas kz_ em 2005. A habilidade de algumas pessoas era realmente incrível. Sinto uma saudade estranha da sensação de estar sozinho em um mapa kz às 3 da manhã e ouvir alguém correndo por ali
    • Vieram à tona lembranças de jogar mapas customizados como de_747 com amigos em LAN ou conexão discada: https://gamebanana.com/mods/82979
      Ainda acho esse mapa um dos mapas customizados mais atmosféricos de todos os tempos. Onde mais você poderia brincar de interpretar Gary Oldman ou Harrison Ford?
    • Eu também não mexo no CS 1.6 há 15 ou 16 anos, mas acho que seria divertido jogar de novo. Fico curioso se roda em um Mac M1 ou se seria preciso uma máquina virtual. Também aceitaria recomendações de material para ler sobre configuração e ajustes de bots

  • Tecnicamente, isso não é uma UI própria do Counter-Strike, e sim a UI do Steam original, não?

    • Sim. Mas o Steam original foi criado para gerenciar atualizações do Counter-Strike e o sistema antitrapaça, o VAC, se minha memória não falha
      Também foi uma época em que ter um WON ID, o atual SteamID, baixo era visto como uma medalha. Algo parecido com ter um ID de conta baixo no Slashdot
    • Sim. O cliente Steam foi originalmente construído sobre a mesma biblioteca VGUI usada nos jogos da Valve, e tinha o mesmo estilo de HL1/CS e outros daquela época
    • Ela foi adicionada ao Half-Life por volta de março de 2000 e entrou no Counter-Strike pouco depois. Não tenho certeza de quando o Steam saiu pela primeira vez, mas acho que havia beta desde 2002
    • Ainda hoje, quando você aperta um botão menos comum no Steam ou provoca um erro raro, fica a sensação de que uma janela nesse estilo vai aparecer em algum canto
      É parecido com o Windows 11 ainda exibir ocasionalmente, até o ano passado, caixas de diálogo no estilo Windows 3.x, e ainda restarem alguns resquícios da era Windows 9x

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

    • Este também usa element na barra de progresso

  • Mais leitura sobre VGUI: https://developer.valvesoftware.com/wiki/Category:VGUI
    Curiosidade: no CS 1.6, era possível voltar para a antiga WON UI colocando setinfo "_vgui_menus" "0" no config.cfg ou no console, ou pelo menu “Options > Multiplayer > Advanced > Buy menu type > VGUI Menus”

    • Sim. Os menus baseados em texto eram os que o Half-Life usava quando foi lançado em 1998
      O Counter-Strike também usava os mesmos menus baseados em texto em 1999, e só em 2000 o engine foi atualizado para incluir VGUI. Provavelmente o Counter-Strike manteve os menus antigos para quem preferia aquele jeito

  • Acho que isso é mais a UI do Steam, ou seja, a UI do navegador de servidores e das configurações, do que o CS 1.6 em si
    Mas não lembro bem como era antes da integração com o Steam

    • CS 1.6 era exclusivo do Steam. Lembro que adiei o registro por um bom tempo porque não gostava da ideia do Steam, até que acabei cedendo
      Ainda tenho um Steam ID de 6 dígitos, que em certo momento parecia significar algo, embora na prática não significasse muita coisa. O navegador de servidores do CS 1.5 e anteriores ficava embutido no menu do aplicativo, e isso é de fato a UI do Steam, não do Counter-Strike. Naquela época, também havia integrado um jogo como Go que dava para jogar com pessoas da lista de amigos
    • Isso é o VGUI2, criado para o engine Source, reutilizado no Steam e depois retroportado para o engine GoldSource quando os jogos passaram a ser lançados pelo Steam
    • Na época, o Steam era praticamente um launcher do CS 1.6

  • Todo mundo corre mais rápido quando está com a faca na mão

    • É meio engraçado que isso ainda seja assim em jogos modernos como Call of Duty: Black Ops 6. Não só com facas, mas com armas corpo a corpo em geral
    • O coração dispara! As mãos tremem!

  • Legal. Não sou gamer, mas vi meu filho jogar vários jogos, e gostei desta UI não por pertencer a um jogo específico, mas por ser limpa e diferente
    Fico curioso para saber se existem outras bibliotecas CSS diferentes que possam ser usadas em páginas

  • Os anos 90 e o começo dos anos 2000 foram a era de ouro das UIs

    • Naquela época, as empresas de tecnologia estavam tentando transformar computadores em objetos domésticos comuns, então faziam uma quantidade enorme de testes com usuários, e, com a descobribilidade se tornando importante, a experiência do usuário também avançou bastante.
      Mas, cerca de 10 anos atrás, começaram a jogar toda essa pesquisa fora em favor de UIs minimalistas, limpas, planas e “sofisticadas”, só porque ficavam mais fáceis em screenshots de marketing. As opções e a personalização desapareceram, e Apple e Microsoft passaram a decidir como o desktop deveria parecer, com a justificativa de que alguém poderia se confundir ao abrir um painel de opções. Odeio quase todos os aspectos da experiência de usuário do macOS, o Dock também é horrível, e há padrões estranhos demais. Ocultar barras de rolagem, aceleração do ponteiro e inversão da roda de rolagem não são recursos, são bugs. O Windows, pelo menos, permite usar software de terceiros para fazer a barra de tarefas e o menu Iniciar parecerem e se comportarem como na época do Win2K. Minha maior reclamação com a experiência de usuário moderna é juntar várias janelas de um programa em uma só e remover o texto. Se há 3 janelas do Firefox abertas, deve haver 3 itens na barra de tarefas, para que eu possa ir à janela desejada com um clique. Isso também permite colocar status no título da janela e usá-la como um widget para monitorar algo
    • Usei XP.css ao mexer com WebSerial, e achei que combinava bem esteticamente, porque lembrava a antiga configuração de modem serial
      https://web-serial-app.netlify.app/
      Fonte: https://github.com/tanepiper/web-serial-controller
    • Concordo totalmente
      Mas, para ser justo, ainda uso Windows 7 no modo de UI padrão sem tema e não joguei muitos jogos modernos, então é difícil fazer uma comparação adequada