360CSS Library

360CSS

CSS styles inspired by the dashboard interface of the Xbox 360 console. Made by Tarmo1

All the code can be found in here:

Installation

Via NPM:

npm install 360css

Then import:

import '360css/styles.css';

Or manual:

<link rel="stylesheet" href="styles.css">

Text Boxes

Dark Text Box

This is a dark-themed content box with white text on a gradient background.

Light Text Box

This is a light-themed content box with dark text on a gradient background.

<div class="textbox-dark">
  <p>Dark Text Box</p>
  <p>This is a dark-themed content box.</p>
</div>

<div class="textbox-light">
  <p>Light Text Box</p>
  <p>This is a light-themed content box.</p>
</div>

Long buttons

Short buttons

<!-- Long Buttons -->
<button class="btn-long">Continue</button>
<button class="btn-long active">Continue</button>

<!-- Short Buttons -->
<button class="btn-short">Continue</button>
<button class="btn-short active">Continue</button>

Input Field

Enter your message:

<div class="input-message">
  <p>Enter your message:</p>
  <input type="text" class="input-field" placeholder="Enter your message">
</div>

Progress Bar

<div class="progress-bar">
  <span class="progress-fill" style="width: 35%;"></span>
</div>

<div class="progress-bar">
  <span class="progress-fill" style="width: 70%;"></span>
</div>

Window

Popup window

This is a popup window that has information text.

<div class="window">
  <div class="window-title">Popup window</div>
  <div class="window-content">
    <p>This is a popup window that has information text.</p>
  </div>
  <button class="btn-long">Continue</button>
</div>

Slider

Volume:

<input type="range" min="0" max="100" value="50" class="slider">

Checkboxes

Checkbox test

<label class="checkbox-wrapper">
  <input type="checkbox" checked>
  <span class="checkbox"></span>
  <span class="checkbox-label">Checkbox test</span>
</label>

Inspired by cs16.css and TheSims.css
Font used can be found here: Noto Sans