Have ideas to improve npm?Join in the discussion! »

    cssgip-browser

    0.0.4 • Public • Published

    GIP

    Gradient Image Placeholders.

    This is a browser version of the CSSGIP module https://www.npmjs.com/package/cssgip and source https://github.com/stoyan/cssgip/

    Purpose

    Generate background CSS for an image to show something while the image is yet to load.

    Writeup: https://calendar.perfplanet.com/2018/gradient-image-placeholders/

    Try it out

    A demo app built with this library: https://tools.w3clubs.com/gip/

    For a simpler demo, see demo.html in the build/ directory

    Usage

    Old school

    In a non-module environment, include the gip.js file found in the build/ directory and use the global function gip():

    <script src="gip.js"></script>
    <script>
    // img is a reference to an image element
    const result = gip(img);
    </script> 

    So img can be an object created with new Image() or document.createElement('image') or found in the DOM like document.images[0] or document.getElementsByTagName('image')[0] or document.getElementById('the-logo') and so on.

    Import

    import gip from 'cssgip-browser';
    const result = gip(img);

    Result

    The object returned by gip(img) has three properties, like so:

    css: "background: #ab9f92; background: linear-gradient(135deg, #cbc6c2 0%, #5d5347 100%)"
    background: "#ab9f92"
    gradient: "linear-gradient(135deg, #cbc6c2 0%, #5d5347 100%)"

    Debugging result

    If you want to play around with the tool and make it better, you can see more detailed data as to how we got the end result. Calling gip(img, true) spits out debugging palettes.

    css: (2) []
      0: "#ab9f92"
    ​​  1: "linear-gradient(135deg, #cbc6c2 0%, #5d5347 100%)"
    palettes: {}
    ​​  bottomleft: Array(4) [ "#827c76", "#d5d4d3", "#dcb487", ... ]
    ​​  bottomright: Array(4) [ "#5d5347", "#cda579", "#c3c2c2", ... ]
      topleft: Array(4) [ "#cbc6c2", "#5d5852", "#7d726a", ... ]
      topright: Array(4) [ "#b6b1ab", "#524c47", "#696967", ... ]
      ​​overall: Array(4) [ "#ab9f92", "#44413c", "#dbd8d7", ... ]
    pretty: "linear-gradient(\n  135deg,\n  #cbc6c2 0%,\n  #5d5347 100%\n)"

    This info is visible in the demo https://tools.w3clubs.com/gip/

    Install

    npm i cssgip-browser

    DownloadsWeekly Downloads

    2

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    7.26 MB

    Total Files

    11

    Last publish

    Collaborators

    • avatar