https://github.com/jerosoler/css-houdini-pixel-box

👾 Pixel Box CSS Houdini PaintWorklet 👾
https://github.com/jerosoler/css-houdini-pixel-box

8bit css css-houdini csshoudini gaming houdini houdini-css-paint nes paintworklet pixel pixel-art retro

Last synced: about 2 months ago
JSON representation

👾 Pixel Box CSS Houdini PaintWorklet 👾

• Host: GitHub
• URL: https://github.com/jerosoler/css-houdini-pixel-box
• Owner: jerosoler
• License: mit
• Created: 2021-06-14T18:30:00.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-06-15T17:32:04.000Z (over 3 years ago)
• Last Synced: 2024-12-01T07:24:00.675Z (about 2 months ago)
• Topics: 8bit, css, css-houdini, csshoudini, gaming, houdini, houdini-css-paint, nes, paintworklet, pixel, pixel-art, retro
• Language: HTML
• Homepage: https://jerosoler.github.io/css-houdini-pixel-box/
• Size: 67.4 KB
• Stars: 11
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
[![GitHub license](https://img.shields.io/github/license/jerosoler/css-houdini-pixel-box)](https://github.com/jerosoler/css-houdini-pixel-box/blob/master/LICENSE)

# PixelBox

CSS Houdini library.

[PLAY DEMO](https://jerosoler.github.io/css-houdini-pixel-box/)

![Demo buttons](https://github.com/jerosoler/css-houdini-pixel-box/raw/master/docs/buttons.png)

![Demo combine](https://github.com/jerosoler/css-houdini-pixel-box/raw/master/docs/combine.png)

## CDN

```html

```

## NPM

```bash

npm install css-houdini-pixel-box

```

## How to use

Download `pixelbox.js` file.

### Polyfill

View support in [caniuse](https://caniuse.com/mdn-api_css_paintworklet)

```html

```

### Javascript:

```javascript

if (

  "paintWorklet" in CSS &&

  "registerProperty" in CSS &&

  "CSSUnitValue" in window

) {

  CSS.registerProperty({

    name: "--pixelbox-border",

    syntax: "",

    initialValue: "2px",

    inherits: false,

  });

  CSS.registerProperty({

    name: "--pixelbox-border-radius",

    syntax: "",

    initialValue: "0px",

    inherits: false,

  });

  CSS.registerProperty({

    name: "--pixelbox-border-color",

    syntax: "",

    initialValue: "#000000",

    inherits: false,

  });

  CSS.registerProperty({

    name: "--pixelbox-background-color",

    syntax: "",

    initialValue: "#ffffff",

    inherits: false,

  });

  CSS.registerProperty({

    name: "--pixelbox-background-shadow-border",

    syntax: "",

    initialValue: "0px",

    inherits: false,

  });

  CSS.registerProperty({

    name: "--pixelbox-background-shadow-color",

    syntax: "",

    initialValue: "#adafbc",

    inherits: false,

  });

  /*CSS.registerProperty({

        name: '--pixelbox-background-shadow-position',

        syntax: '',

        initialValue: 'bottom-right',

        inherits: false

    });

    */

} else {

  console.log("Not Supported");

}

CSS.paintWorklet.addModule("pixelbox.js");

```

### CSS

```css

div {

  display: inline-block;

  width: 200px;

  height: 200px;

  text-align: center;

  line-height: 200px;

  color: white;

  background-image: paint(pixelbox);

  --pixelbox-border: 10px;

  --pixelbox-border-radius: 5px;

  --pixelbox-border-color: #a0a0a0;

  --pixelbox-background-color: #000000;

  --pixelbox-background-shadow-border: 20px;

  --pixelbox-background-shadow-color: #494949;

  --pixelbox-background-shadow-position: bottom-right;

}

```