[HN Gopher] Show HN: Cs16.css - CSS library based on Counter Str...
___________________________________________________________________
Show HN: Cs16.css - CSS library based on Counter Strike 1.6 UI
Author : samke-
Score : 349 points
Date : 2025-01-24 15:37 UTC (7 hours ago)
(HTM) web link (cs16.samke.me)
(TXT) w3m dump (cs16.samke.me)
| phplovesong wrote:
| NOSTALGIA!
|
| Awesome job!
| dvh wrote:
| Why you didn't use progress or meter for progress bar?
| dylan604 wrote:
| why make everything need a class rather than just styling the
| DOM elements directly. Why wrap a checkbox into a div rather
| than just a <form>?
|
| why did you skin the cat that way when there's 98 other ways to
| do it?
|
| maybe there's a logical reason more than "that's just what came
| to mind", maybe not. that's the beauty of the whole thing.
| there is no one way
| Bjartr wrote:
| Not every question is a criticism that needs to be defended
| against. The person you're responding to could very well just
| like to know the reason if one exists, no more, no less.
|
| If you know a better way to get that info than asking the
| question, I'm all ears.
|
| (major digression ahead)
|
| This is actually something I've been digging into for a
| while, trying to improve my own communication. My own current
| best answer for this sort of situation is the social
| expectation is that a neutral question will _always_ be
| accompanied by praise and gratitude, and any question asked
| that lacks that accompaniment will be interpreted as
| antagonistic.
|
| For example, the comment you're responding too could have
| started with "This looks really cool, ..." or "Wow, this
| takes me back..." or "I can see a lot of effort went into
| this..." and it would have resulted in the question coming
| off as neutral instead of critical to some people.
|
| What's fascinating is when I mention this kind of thing I
| almost always get one of two responses
|
| * Of course that's how it works, everyone knows that!
|
| * That's ridiculous, no one can be expected to do that!
| richardlblair wrote:
| I think I'm more cynical. Almost everything stated on the
| internet will be perceived as antagonistic. At least by
| some. It's more a representation of the reader's internal
| state rather than an issue with the question / statement.
| Unless, of course, the question / statement is overtly
| antagonistic.
| Bjartr wrote:
| It's definitely not just on the internet, I've been
| working for years to learn how to not upset people for
| asking reasonable and genuine questions IRL. It's a real
| struggle to this day to notice I'm failing to engage in
| the social ritual correctly and come up with appropriate
| extra positivity on the spot just so I can be considered
| a non-antagonist.
| richardlblair wrote:
| I think internalization is important for self
| improvement, so I admire the way you frame this. Try not
| to downplay the other part's role, though. They are also
| making a choice in the exchange.
| elktown wrote:
| To be fair, software discussions in particular are
| absolutely overflowing with snark, reflexive dismissals,
| and just general one-upmanship. So I can understand
| people assuming the worst.
| sgc wrote:
| Precisely why it is perfectly fine and good to be
| inquisitive, and ask why people do things the way they do.
| It's the point of a show and tell.
| marcellus23 wrote:
| I'm not sure that argument holds here, not every solution in
| programming is equally good just because. A <progress>
| element has the advantage of semantically actually
| representing a progress bar, which improves accessibility and
| who knows what other browser behavior and heuristics. In
| general you should try to use semantically correct HTML tags
| unless you have a really good reason not to. Maybe in this
| case he couldn't get the appearance he wanted using
| <progress>, which would be an acceptable reason.
|
| Obviously this is nitpicking and this UI was made for fun
| rather than being a serious library intended for production.
| But that's a different criticism of the GP than the one you
| made.
| fnikacevic wrote:
| Just looking at this makes me feel like a noob.
|
| I tried installing CS 1.6 20 years after launch roughly and it
| was pointless trying to compete.
| pelagicAustral wrote:
| That's because the servers that are left are filled with die-
| hard players that know the maps, and every little quirk about
| the gameplay to the pixel level... There still a lot of fun in
| there, some mini games, more esoteric modes, deathmatch... The
| other characteristic of many server is that they are modded to
| the gills, and in some cases the work that has been done on the
| game over the years ends up giving some very pleasant
| surprises...
|
| I logged in about 120 hours in 2024 after not playing for 12
| years, and everything was different and the same. You got a lot
| of 30-something's playing after office hours, keeping the
| servers alive, and like I said, some servers are at a
| completely different level, I had so much laughs and met quite
| a few new people...
|
| I recommend to look a bit more and I'm sure you'll find a few
| servers to stick around to, even if you get headshotted by an
| AWP from across the map on each round.
| pknerd wrote:
| Awesome
|
| Though I am not a gamer I have seen my son playing different
| games, I loved it not because it belonged to a certain game but
| because it is clean and different.
|
| Are there any other unique CSS libs that could be used on pages?
| graypegg wrote:
| https://github.com/matt-auckland/retro-css Some fun ones on
| here!
| chrisweekly wrote:
| awesome, thanks for the link!
| duxup wrote:
| I was watching my son play Half Life 2 recently and it occurred
| to me how much more real or immersive it seemed when the menus
| and such had this style and they look like actual computer system
| UI. Dated maybe, but they feel industrial and real.... and easy
| to use all in one.
|
| Meanwhile many games have hyper stylized menus with flowery
| wingdings all over them and makes it unrealistic / a horrible
| experience / chore.
| lelanthran wrote:
| I liked the menu system in Crysis 2 (or 3 - not too sure).
|
| Really made you feel like you were inside the cryosuit.
| bakugo wrote:
| > many games have hyper stylized menus with flowery wingdings
| all over them
|
| It can work depending on the style/tone of the game.
|
| The real problem, in my opinion, is all the games nowadays with
| perfectly flat, generic, colorless UIs with absolutely no style
| or identity. Nintendo has been doing this a lot, for example.
| duxup wrote:
| I'll be honest, I went back to some OLD bootstrap styling for
| some things and I liked it a lot. The candy looking buttons
| are nice ...
|
| I'm done with flat and muted all the time.
|
| Also (more to my example) it looks like a realistic UI. A lot
| of game stylized UI are UI nobody would ever make
| intentionally for a thing you're supposed to use often.
|
| So yeah like you say just some depth and realistic UI feel
| goes a long way.
| Sohcahtoa82 wrote:
| > Dated maybe
|
| When current UI trends are designed to be flat and hide
| functionality, destroying discoverability, a key component of
| UX, I'd argue that "dated" is a feature, not a bug.
| duxup wrote:
| I mentioned in another comment that I used some very old
| (2.0) bootstrap for fun recently and yeah I like it better
| than the flat / colorless stuff.
| sweaterkokuro wrote:
| This is awesome!
| mavamaarten wrote:
| Not gonna lie, I expected bleep bloop sound effects when clicking
| buttons
| HexDecOctBin wrote:
| What are the best lightweight CSS UI libraries containing widgets
| like tabs, trees, etc.? I don't have webdev experience (only GTK,
| etc.), but I need to write a web dashboard. I tried looking
| around but the only alternatives seem to be either bloated JS
| frameworks or abandoned experiments.
| oorza wrote:
| Tailwind might not be the most perfect fit, but it's "just"
| CSS.
| CharlesW wrote:
| And Tailwind v4 is notably better than v3 in terms of being
| "CSS first": https://tailwindcss.com/blog/tailwindcss-v4
| grimgrin wrote:
| no suggestions in this reply, nor can I speak to if this is a
| good or bad idea, but you may like to learn about "classless
| css frameworks", basically just targeting the html5 semantics
|
| https://github.com/dbohdan/classless-css
|
| also, https://github.com/troxler/awesome-css-frameworks
|
| others may give you a _real_ recommendation. cheers
| nonethewiser wrote:
| Yup this is the place to start if you dont want to have to
| learn something new. Doesn't get you too far but it's great
| bang for your buck.
| dylan604 wrote:
| How invested in CSS do you want to be? If you're just wanting
| to include someone else's .css file and then assign classes
| where needed, that's one way to go. However, CSS isn't as
| daunting as many people make it out to be for the vast majority
| of a user's needs--adding colors, borders, padding/margin, and
| other basic styling. Looking to use CSS for layout is where
| things can get "interesting", sometimes challenging, and
| sometimes arghhhh!
|
| I've hand written the CSS for all of the sites I've worked on,
| and the CSS is smaller than some all encompassing library.
| Plus, I'm much better at CSS. But I decided I wanted to invest
| that effort. No shame if you don't
| lelanthran wrote:
| I am using this _in production!_ : https://khang-
| nd.github.io/7.css/
|
| Of course, it's only for my own invoicing/crm system. I started
| on replacing the look and feel of everything with a flat more
| modern/less user-friendly equivalent by downloading the static
| css and modifying it to look like material UI designs.
| HexDecOctBin wrote:
| This looks nice, thanks!
| nonethewiser wrote:
| Oh wow, I really love this. PHPBB also comes to mind for this
| sort of style.
| https://www.phpbb.com/community/viewforum.php?f=551
|
| Is there a name for this style? Im also trying to pinpoint
| the defining characteristics. The thing that stand out to me
| are:
|
| - 3d-ish buttons
|
| - gradients (headers, buttons, etc)
|
| - not much whitespace between text
|
| - small text
| woodrowbarlow wrote:
| that style was prominent just as skewmorphism started to
| fall out of fashion and "web 2.0" was just becoming a
| buzzword.
| nonethewiser wrote:
| I suppose its not the most lightweight, and it's considered
| outdated by many but I actually think Bootstrap is great for
| your use case.
|
| It uses classes to style html inline and looks pretty good. The
| downside is it gives a fairly generic look but I don't think
| you should be too worried about that.
|
| Tailwind has largely replaced it because it offers more
| flexibility. You use utility classes to write the css (add
| padding, change color, etc.) and isnt as opinionated as
| bootstrap. But I dont think you want that.
|
| If you really are going for lightweight and simple you should
| checkout classless css which only uses html to style things.
| Nothing needed from you other than including the css sheet.
| https://github.com/dbohdan/classless-css
| FrontAid wrote:
| Dashboards, tabs, trees, ... usually require at least some
| JavaScript to work properly. For some components, you may be
| able to use hacks around that. But I would generally not
| recommend that outside of experimentation. So a pure CSS
| framework is not going to work. It seems that you are not using
| a frontend framework like Vue.js. So I would recommend a
| library using web components for the interactivity. One good
| option is Shoelace [1] and there are a couple of others, too
| [2]. Take a look at the ones with the checkmark in the "W"
| column for libraries with web components.
|
| [1] https://shoelace.style/
|
| [2] https://frontaid.ch/web/ui/libraries.html
| volkk wrote:
| really takes me back. i love this. that progress bar is how i
| remember steam being stuck updating for ages (meanhwile it was
| just entirely frozen and i had to restart it)
| Propelloni wrote:
| Looks a lot like Lesstif. Nice!
| fourseventy wrote:
| This is the kind of thing I browse Hacker News for. Well done.
| nonethewiser wrote:
| This is really excellent.
|
| It could use some styles for tables.
| nolan_wyss wrote:
| Very nice! I installed CS 1.6 last year again, after almost 15
| years of not playing, and now I almost play every day 10 - 15
| mins against bots to clear my mind. To make it more fun I even
| created my own bot team and a whole tournament where I play
| against all the pro teams of the +-2008ties. I also rediscovered
| a map I created back then on a super old hard disk - never
| thought that with almost 40 I would still play it - so thank you
| past-me.
| albertgoeswoof wrote:
| CS has always been a great mind clearer. A ranked 5v5 game is
| high pressure and intense, lasts about 30-45 mins, and has
| enough human contact to satisfy me. I haven't found anything to
| replace it since I quit a few years ago.
| thot_experiment wrote:
| DotA is the same thing for me, though I assume you quit for a
| reason that would probably hold true for DotA as well. I hate
| how harshly CS punishes acting rashly, it really encourages
| you to hold angles and play methodically/strategically and I
| feel like in DotA I'm afforded more leeway to gamble with
| flashy plays. That all being said they are both brilliant
| games. There's something particularly appealing about the
| round model in CS, buy vs save rounds and the way the game
| gives you an opportunity for a series of rematches where you
| can learn from the way your opponents played the last round
| to try and get a better outcome is just a really compelling
| gameplay loop, even if I don't love it personally. (rather be
| playing q3dm17)
| Cyph0n wrote:
| TF2 (another Valve game) is an excellent option if you want
| something more casual/low stress and also flexible when it
| comes to time (no penalties on leaving since it's a casual
| game).
| nxobject wrote:
| Watch out for 1/2-hour ish capture-point campaign style
| maps, though... I wasted so many Fridays in my early 2010s
| doing that.
| sintezcs wrote:
| I also haven't touched CS 1.6 for 15-16 years, it will be cool
| to try it. Is it possible to run it on Mac M1 or I need a VM?
| Also, can you recommend any resources where I can read how to
| setup and configure bots? TY!
| selectodude wrote:
| Isn't ported to ARM64. Runs really well in Whisky though.
|
| https://getwhisky.app/
| Lammy wrote:
| I've been using this to play TF2 Classic on my M3 MBP and
| it works perfectly. I had some freezing-while-sound-skips-
| endlessly issues when using the voice chat hotkey, but that
| was resolved using WineTricks (built in to Whisky UI) to
| install `dsound`.
|
| Now's a great time to start playing -- The TF2C 2.2 "Double
| Down Update" comes out _today_!!
| https://tf2classic.com/double_down/
|
| e: And I also had to disable macOS's default keyboard
| layout switching shortcuts (which I never use anyway) since
| I kept triggering it while crouch-jumping lol
|
| e 2: https://news.ycombinator.com/item?id=42816545
| dewey wrote:
| Back in the days on lan parties there was what we called "the
| russian version" that only had question marks in the
| installation dialog (Because of unsupported fonts most
| likely) which had Z-Bot included.
|
| That's probably this one:
| https://archive.org/details/cs-1_6_z-bot
| Lammy wrote:
| https://down-cs.su/clean.php
| pea wrote:
| I have great memories playing kz_ maps for hours in 2005. The
| amount of skill of some people was mind blowing. Something
| nostalgic about the feeling of being alone in a kz map at 3am
| and then hearing someone else hopping around.
| digestives wrote:
| Ah, memories flood back of LAN or dial-up sessions with friends
| on custom maps like de_747 [1]
|
| 1: https://gamebanana.com/mods/82979 I still contend it is one
| of the most atmospheric custom maps ever made - how else do you
| get to role play as Gary Oldman or Harrison Ford!
| Dilettante_ wrote:
| Guys will see this and just think "Hell yeah"
| andrewmcwatters wrote:
| VGUI!
| IYasha wrote:
| Good job! But it reminds me of the dreaded VGUI.dll. (0_0) For
| those who wrote code for the GS engine it's probaby one of the
| worst experiences.
| GranPC wrote:
| It didn't get much better in Source either, much to my dismay.
| IYasha wrote:
| They also added, like, 80MB DLL (AFAIR, chromium) just to
| render HTML MOTD at some point.
|
| I personally had to rewrite most of mod's VGUI code to make
| it less leaky and more usable, and not once have I thought of
| using CSS instead of those INI-style theme configs. But CSS
| is too complicated to parse (and no one will use that
| anyway). :(
| GranPC wrote:
| Originally it used Windows's built-in embeddable IE thing,
| which as you can imagine was not stellar for security. IIRC
| there have been some incidents with bad servers serving up
| MOTDs that exploited vulnerabilities in Trident to execute
| arbitrary code.
|
| I believe they switched to Chromium while preparing for the
| OS X port. You'd think this would be good for security, but
| they then proceeded to update to the latest version
| approximately once a decade.
| nxobject wrote:
| I know a lot of servers exploited that as well to play
| music in the background... in retrospect, the idea of a
| web view hanging around while you're in a game is
| terrifying.
| wiseowise wrote:
| 90s, early 2000s were peak times for UI.
| IYasha wrote:
| Can't agree more!
|
| But, to be fair, I still use win7 in native (unthemed) UI mode
| and haven't played many modern games to have a proper
| comparison :D
| Sohcahtoa82 wrote:
| It was a time when tech companies were trying to make computers
| a common household item, so they did tons of user testing and
| we made great strides in UX as discoverability became king.
|
| Then, starting about 10 years ago, they started throwing all
| that research out the window in favor of minimal, clean, flat,
| "sleek" UIs because the screenshots are easier to market.
|
| They started appealing to the lowest common denominator. We've
| lost choice and customizability in favor of allowing Apple and
| Microsoft to decide what our desktops should look like because
| some people might be confused if they open up an options panel.
|
| I hate nearly every single thing about the MacOS UX. The dock
| is awful, and so many insane defaults all over the place.
| Hiding scrollbars is a bug, not a feature. Pointer acceleration
| is a bug, not a feature. The scroll wheel operating in reverse
| is a bug, not a feature.
|
| At least with Windows, I can make it tolerable with third party
| software to make my task bar and Start menu look and feel like
| the Win2K days. My biggest complaint about the modern UX is
| coalescing multiple windows from one program into a single item
| and not having text. If I have 3 Firefox windows open, that
| should be 3 items on my task bar. It makes it so I can switch
| to any of them in a single click. It also means that I can use
| a window as a widget to monitor something by having the status
| as the title of the window.
| tanepiper wrote:
| When I was playing with WebSerial, I ended up using XP.css
| because it reminded me of configuring with old serial modems -
| I think the aesthetic works quite well.
|
| https://web-serial-app.netlify.app/
|
| (Source: https://github.com/tanepiper/web-serial-controller)
| Edd314159 wrote:
| Isn't this technically the original _Steam_ UI, not just Counter
| Strike?
| bakugo wrote:
| Yes, the Steam client was originally built on top of the same
| VGUI library used in Valve's games, and used the same style as
| HL1/CS/etc back then.
| rtehfm wrote:
| True, but the original Steam was created for managing updates
| to Counter Strike and their anti-cheap system (VAC if memory
| serves me right). Also back when having a low WON ID (now
| SteamID) was a badge of honor (like having a low Slashdot
| account ID).
| Ringz wrote:
| Sorry for the useless comment but I really like the idea of a
| ,,anti-cheap system".
|
| I will use it in my next presentation for shareholders. /s
| nxobject wrote:
| I'm sure the behavioral economics people at Activision and
| EA trying to get kids to buy more cosmetics would have a
| lot to say about that...
| WorldMaker wrote:
| Yeah, still feels like even today Steam could pop up something
| in this style somewhere when you press a less common button or
| cause a less common error. Kind of like how Windows would
| occasionally have even Windows 3.x style dialogs up until _last
| year_ in Windows 11, and still has a few stragglers from
| Windows 9x era.
| phatfish wrote:
| This is the Steam UI (server browser and config), rather that CS
| 1.6 specifically i think? I'm having a hard time remembering what
| it looked like before Steam integration though.
| least wrote:
| CS 1.6 was exclusive to Steam; I remember waiting quite a while
| to register because I didn't like the idea of Steam but
| ultimately caved (still have a 6 digit steam id, which used to
| sort of but not really mean something). The server browser in
| CS 1.5 and below was built into the menu's on the application.
|
| This is indeed the Steam UI, not Counter-Strike. This was also
| back when they had games like Go built in that you could play
| with people on your friends list.
| giancarlostoro wrote:
| I really like this asthetic.
| benatkin wrote:
| Needs even worse kerning for more nostalgia :D
|
| Also ought to be paired with https://github.com/ocornut/imgui
|
| I came up with a terrible pun shortly after seeing this: "Kern
| you feel the love tonight"
| Lammy wrote:
| More reading about VGUI:
| https://developer.valvesoftware.com/wiki/Category:VGUI
|
| Fun fact: in CS 1.6 it could actually be reverted to the old-
| style WON UI by with `setinfo "_vgui_menus" "0"` in config.cfg or
| in the console, or buried in the menus as "Options > Multiplayer
| > Advanced > Buy menu type > VGUI Menus".
| culi wrote:
| I've been eagerly awaiting the opportunity to expand my
| collection!
|
| 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
| fusedshadow wrote:
| Belongs here: https://code.divshot.com/geo-bootstrap/
| culi wrote:
| I like it! But how would you describe this one? This
| collection is meant more for tight/inspired themes. But I
| also included https://bootstra386.com/ which is on the edge
| too so I'm not against including this
| fusedshadow wrote:
| Geocities is infamous.
| com2kid wrote:
| You forgot snes! https://snes-css.sadlative.com/
| culi wrote:
| Thanks! I'll add this next time I post this list :)
| MortyWaves wrote:
| That 95 theme is terrible. May as well use the 98 theme.
| pachouli-please wrote:
| This is so epic. Makes me want to create web pages myself which I
| never really have to date.
| simlevesque wrote:
| That's my childhood.
| myheartisinohio wrote:
| Everyone runs faster with a knife.
___________________________________________________________________
(page generated 2025-01-24 23:00 UTC)