jerosoler / css-houdini-pixel-box

👾 Pixel Box CSS Houdini PaintWorklet 👾

PixelBox

CSS Houdini library.

PLAY DEMO

CDN

<script src="https://cdn.jsdelivr.net/gh/jerosoler/css-houdini-pixel-box/pixelbox.js"></script>

NPM

npm install css-houdini-pixel-box

How to use

Download pixelbox.js file.

Polyfill

View support in caniuse

<script src="https://unpkg.com/css-paint-polyfill"></script>

Javascript:

if (
  "paintWorklet" in CSS &&
  "registerProperty" in CSS &&
  "CSSUnitValue" in window
) {
  CSS.registerProperty({
    name: "--pixelbox-border",
    syntax: "<length>",
    initialValue: "2px",
    inherits: false,
  });

  CSS.registerProperty({
    name: "--pixelbox-border-radius",
    syntax: "<length>",
    initialValue: "0px",
    inherits: false,
  });

  CSS.registerProperty({
    name: "--pixelbox-border-color",
    syntax: "<color>",
    initialValue: "#000000",
    inherits: false,
  });

  CSS.registerProperty({
    name: "--pixelbox-background-color",
    syntax: "<color>",
    initialValue: "#ffffff",
    inherits: false,
  });

  CSS.registerProperty({
    name: "--pixelbox-background-shadow-border",
    syntax: "<length>",
    initialValue: "0px",
    inherits: false,
  });

  CSS.registerProperty({
    name: "--pixelbox-background-shadow-color",
    syntax: "<color>",
    initialValue: "#adafbc",
    inherits: false,
  });

  /*CSS.registerProperty({
        name: '--pixelbox-background-shadow-position',
        syntax: '<string>',
        initialValue: 'bottom-right',
        inherits: false
    });
    */
} else {
  console.log("Not Supported");
}
CSS.paintWorklet.addModule("pixelbox.js");

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;
}