cornerbox

    0.0.3 • Public • Published

    GitHub license

    CornerBox

    CSS Houdini library.

    PLAY

    Demo

    CDN

    <script src="https://cdn.jsdelivr.net/gh/jerosoler/cornerbox/CornerBox.js"></script>

    NPM

    npm install cornerbox

    How to use

    Download Cornerbox.js file.

    Javascript:

    if ('paintWorklet' in CSS && 'registerProperty' in CSS && 'CSSUnitValue' in window) {
                CSS.registerProperty({
                    name: '--cornerbox-width',
                    syntax: '<length>',
                    initialValue: '10px',
                    inherits: false
                });
                CSS.registerProperty({
                    name: '--cornerbox-length',
                    syntax: '<length>',
                    initialValue: '10px',
                    inherits: false
                });
                CSS.registerProperty({
                    name: '--cornerbox-color',
                    syntax: '<color>',
                    initialValue: '#ffffff',
                    inherits: false
                });
    
                CSS.paintWorklet.addModule('CornerBox.js');
            } else {
                console.log("Not Supported");
                alert("Not Supported");
            }

    CSS

    div {
        --cornerbox-color:#1100fc;
        --cornerbox-width: 5px;
        --cornerbox-length: 15px;
        background-image: paint(cornerbox);
    }

    Install

    npm i cornerbox

    DownloadsWeekly Downloads

    24

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    4.6 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar