PIXELART-CSS

► npm install @blue87moon/pixelart-css ◄

// CDN
<link rel="stylesheet" href="https://raw.githubusercontent.com/blackmoon87/pixelart.css/main/css/pixelart.min.css">

// npm
npm install @blue87moon/pixelart-css

// 01. FRAMES

px-frame

Standard 3D raised frame

<div class="px-frame">...</div>

px-frame-neon

Synthwave neon glow

<div class="px-frame-neon">...</div>

px-frame-gb

GAME BOY

<div class="px-frame-gb">...</div>

px-frame-inset

Sunken / pressed

<div class="px-frame-inset">...</div>

// 02. PIXEL WINDOW

PROGRAM.EXE _ □ ✕

Window body content here.

<div class="px-window">
  <div class="px-window-title">
    <span>TITLE</span>
    <span>
      <span class="px-window-btn">_</span>
      <span class="px-window-btn">□</span>
      <span class="px-window-btn">✕</span>
    </span>
  </div>
  <div class="px-window-body">...</div>
</div>

// 03. BUTTONS

<button class="px-btn px-btn-primary px-press">PRIMARY</button>
<button class="px-btn px-btn-danger px-press">DANGER</button>
<button class="px-btn px-btn-success px-press">SUCCESS</button>
<button class="px-btn px-btn-gold px-press">GOLD</button>
<button class="px-btn px-btn-neon px-glow">NEON</button>
<button class="px-btn px-btn-gb px-press">GAME BOY</button>

// 04. BADGES

NEON HOT GOLD LIVE ● REC

<span class="px-badge" style="color:#00f5ff;background:#1a1a2e">NEON</span>
<span class="px-badge px-blink" style="color:#ff2d78">● REC</span>

// 05. PROGRESS BARS

HP — Green (default)

MP — Blue

DANGER — Red

<progress class="px-progress" value="75" max="100"></progress>
<progress class="px-progress px-progress-fill-blue" value="45" max="100"></progress>
<progress class="px-progress px-progress-fill-red" value="15" max="100"></progress>

// 06. PIXEL SHADOWS

OUTLINE

3D NES

DEEP

NEON GLOW

WINDOW

<div class="px-shadow-1">outline</div>
<div class="px-shadow-4">3D NES raise</div>
<div class="px-shadow-5">deep drop</div>
<div class="px-shadow-6">neon glow</div>
<div class="px-shadow-7">double border</div>

// 07. TEXT EFFECTS

px-text-shadow

HARD SHADOW

px-text-shadow-neon

NEON GLOW

px-text-outline

OUTLINED

px-text-rainbow

RAINBOW

<p class="px-text-shadow">HARD SHADOW</p>
<p class="px-text-shadow-neon" style="color:#00f5ff">NEON GLOW</p>
<p class="px-text-outline" style="color:#ffe600">OUTLINED</p>
<p class="px-text-rainbow">RAINBOW</p>

// 08. PIXEL BACKGROUNDS

px-bg-grid

<div class="px-bg-grid"></div>

px-bg-checker

<div class="px-bg-checker"></div>

px-bg-stars

<div class="px-bg-stars"></div>

// 09. ANIMATIONS

👾

px-anim-float

⭐

px-anim-spin

♥ px-blink

px-shake (hover)

px-bounce (hover)

<div class="px-anim-float">👾</div>
<div class="px-anim-spin">⭐</div>
<span class="px-blink">♥</span>
<button class="px-btn px-shake">SHAKE</button>
<button class="px-btn px-bounce">JUMP</button>

// 10. CRT SCANLINE

C:\> BOOT OK_

<div style="position:relative">
  <div class="px-scanline" style="position:absolute;inset:0"></div>
  <p>content over scanlines</p>
</div>

// 11. TOOLTIP

<span class="px-tooltip px-badge" data-tip="TOOLTIP TEXT">HOVER ME</span>

// 12. SPRITE CONTAINERS

<div class="px-sprite px-sprite-sm">8px</div>
<div class="px-sprite px-sprite-md">16px</div>
<div class="px-sprite px-sprite-lg">32px</div>
<div class="px-sprite px-sprite-xl">64px</div>

// 13. PIXEL FORMS & ELEMENTS

SAVE DATA OPTION A OPTION B

px-link READ MORE_

px-kbd

Press ESC to exit

px-list

First item
Second item

px-blockquote

It's dangerous to go alone!

<input type="radio" class="px-radio">
<a href="#" class="px-link">LINK</a>
<kbd class="px-kbd">ESC</kbd>
<ul class="px-list"><li>Item</li></ul>
<blockquote class="px-blockquote">Quote</blockquote>

// 14. PIXEL CARDS

Default

ITEM.DAT

Card body content here. Use for panels, items, inventory slots.

Footer info

<div class="px-card">
  <div class="px-card-header">TITLE</div>
  <div class="px-card-body">...</div>
  <div class="px-card-footer">...</div>
</div>

Neon variant

NEON.EXE

Synthwave neon styled card.

v1.0.1

<div class="px-card px-card-neon">...</div>

Game Boy variant

POCKET.GB

LEVEL 01
HP ████░
MP ██░░░

<div class="px-card px-card-gb">...</div>

// 15. PIXEL TABS

HP: 100 / 100
MP: 45 / 80
EXP: 1240 / 2000

🗡 Iron Sword ×1
🛡 Leather Shield ×1
🧪 Potion ×5

    ░░▓▓░░░
░▓██▓▓░
░░▓▓▓░░
░░░▓░░░
  

<div class="px-tabs">
  <button class="px-tab active">TAB 1</button>
  <button class="px-tab">TAB 2</button>
</div>
<div class="px-tab-panel active">Panel 1</div>
<div class="px-tab-panel">Panel 2</div>

// 16. PIXEL BORDERS

.px-border — default

.px-border-neon — cyan

.px-border-pink

.px-border-gold

.px-border-green

.px-border-double

.px-border-double-neon

.px-border-dashed-neon

<div class="px-border">default</div>
<div class="px-border-neon">cyan</div>
<div class="px-border-double">double</div>
<div class="px-border-double-neon">double neon</div>
<div class="px-border-dashed-neon">dashed neon</div>
<div class="px-border-top">top only</div>

// 17. MODALS & ALERTS

Connection to server lost. Retrying...

Item "Iron Sword" acquired!

Warning: HP is running low!

<div class="px-alert px-alert-danger">Error!</div>

<!-- Open via JS: dialogElement.showModal() -->
<dialog class="px-modal">
  <h2>Title</h2>
  <p>Message</p>
  <button onclick="this.closest('dialog').close()">CLOSE</button>
</dialog>