Retro CS 1.6 UI Kit for Web – cs16.css

Preview:

Description:

cs16.css is a tiny JavaScript library that recreates Counter-Strike 1.6’s iconic user interface through pure CSS components.

The library supports essential UI components like buttons, form fields, horizontal rules, progress bars, range sliders, and more. Each component preserves Counter-Strike 1.6’s distinctive appearance while functioning as standard HTML elements.

How to use it:

1. Download and include the main stylesheet ‘cs16.min.css’ on the page. The package includes both development and production files, with the main cs16.css for customization and minified versions for deployment. The ArialPixel font maintains authentic CS 1.6 typography across components.

<link rel="stylesheet" href="/path/to/cs16.min.css">

2. Create UI elements using cs16.css classes:

<button class="cs-btn">Button</button>
<button disabled class="cs-btn">Disabled</button>
<hr class="cs-hr" />
<div class="cs-checkbox">
<input id="checkbox" type="checkbox" />
<label class="cs-checkbox__label" for="checkbox">Checkbox</label>
</div>
...