Web Pixel UI Engine (WPUIE)

# About

WPUIE 皆在为像素风格网页或像素游戏提供组件。

# Installation

目前仅有css文件，你可以点击此处下载。未来会加入js脚本以提供更丰富的操作。当然你可以仅仅使用css。
如果你没有更丰富的定制需求(例如页面中不同大小和颜色的border)，你可以使用NES.css，其对网络更为友好。

# Usage

下方提供了一些基础示例。详细请参考document。

Texts
Primary Success Warning Error Disabled
Buttons
Link Link Link Warning Error Disabled



Input type color:
Radios
Before text:
After  text:
Primary:
Indeterminate:
Triangle:
Mixed:
Mixed2:
Checkboxes


Indeterminate:
Inputs
email:
number:
password:
search:
tel:
url:
disabled:
text:
inline:
Textarea
Selects
Containers
no-legend
legendtext
centeredcentered centered centered

scroll

long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long

longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong

centered class="pui centered" size="2" style="--bwidth: 6px; --bcolor: #088; --bg-color: #0084;"
Dialogs

Dialog

Alert: this is a dialog.

Dark dialog

Alert: this is a dialog.

Rounded dialog

Alert: this is a dialog.

Dark and Rounded dialog

Alert: this is a dialog.

Dark and Rounded dialog

Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog.

Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog.

Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog.

Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog.

Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog.

Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog.

Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog.

Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog.

Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog. Alert: this is a dialog.
Lists
  • Good morning.
  • Thou hast had a good night's sleep, I hope.
  • Thou hast had a good afternoon
  • a long long long long long long long long long long long long long long long long long long long long long text.
  • Good night.
  • Good morning.
  • Thou hast had a good night's sleep, I hope.
  • Thou hast had a good afternoon
  • a long long long long long long long long long long long long long long long long long long long long long text.
  • Good night.
  • default
  • none
  • disc
  • circle
  • square
  • nil
  • rect
  • disclosure-open
  • disclosure-closed
Details
Details

Content

Details

Content

sideline
dashed

Content

dotted

Content

Work with

Colored border

Table
TitleTitleTitle
AA long long AA
AA long long AA
TitleTitleTitle
AA long long AA
AA long long AA
TitleTitleTitle
AA long long AA
AA long long AA
TitleTitleTitle
AA long long AA
AA long long AA
TitleTitleTitle
AA long long AA
AA long long AA
TitleTitleTitle
AA long long AA
AA long long AA
Progress

Balloons
Normal balloon
from-right
on-left
foo
foo
on-left
from-top
foo

on-top
on-top from-right
on-right
foo
foo
on-right
from-top
foo

is transparent background
! Shark !
Pixel-arts
Colored Border
Radius 0; Normal Radius 1; Primary Radius 2; Success
Pixelated Background
content

brightness="1.3" size="auto 100%"

size="25ch 2em" no-repeat color="#888"

Pixelated Image

Original:
Image Border
image border
image border (fill center)
Scroll Bar
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi et nisi ut est venenatis viverra. Aenean pede orci, blandit quis, faucibus quis, egestas ut, mi. Pellentesque enim purus, venenatis dignissim, tincidunt a, ullamcorper eget, nibh. Nullam ut sem adipiscing orci vehicula interdum. Proin a enim. Phasellus sollicitudin, magna vitae vestibulum facilisis, tellus nunc iaculis arcu, in molestie sem velit tempus est. In eleifend velit at sem adipiscing sodales. Nunc sapien felis, aliquam et, volutpat rhoncus, condimentum ut, tortor. Integer est. Quisque viverra. Praesent sed arcu. Maecenas id lorem a leo lobortis condimentum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi et nisi ut est venenatis viverra. Aenean pede orci, blandit quis, faucibus quis, egestas ut, mi. Pellentesque enim purus, venenatis dignissim, tincidunt a, ullamcorper eget, nibh. Nullam ut sem adipiscing orci vehicula interdum. Proin a enim. Phasellus sollicitudin, magna vitae vestibulum facilisis, tellus nunc iaculis arcu, in molestie sem velit tempus est. In eleifend velit at sem adipiscing sodales. Nunc sapien felis, aliquam et, volutpat rhoncus, condimentum ut, tortor. Integer est. Quisque viverra. Praesent sed arcu. Maecenas id lorem a leo lobortis condimentum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi et nisi ut est venenatis viverra. Aenean pede orci, blandit quis, faucibus quis, egestas ut, mi. Pellentesque enim purus, venenatis dignissim, tincidunt a, ullamcorper eget, nibh. Nullam ut sem adipiscing orci vehicula interdum. Proin a enim. Phasellus sollicitudin, magna vitae vestibulum facilisis, tellus nunc iaculis arcu, in molestie sem velit tempus est. In eleifend velit at sem adipiscing sodales. Nunc sapien felis, aliquam et, volutpat rhoncus, condimentum ut, tortor. Integer est. Quisque viverra. Praesent sed arcu. Maecenas id lorem a leo lobortis condimentum.
Slider
Icons
Triangle:
Disc:
Circle:
Square:
Rect:
^