Pellucid

Note: Use backdrop-filter with filter(blur(%px)) once it's widely supported in all major browsers.

• Heroku: http://pellucid.herokuapp.com/

As Pellucid is a highly experimental module, it requires a browser that supports Custom Elements. With the lack of any screenshot API, Pellucid uses antiquated iframe elements to create a crystalline blurred background for your elements – as such there are certain downsides. Pellucid merely loads the current page in its default state, and therefore any elements which have been modified since the initial state will not be included in the crystalline background – this affects greatly SPAs and pages that use POST data. Considerations should also be taken for the duplicated page-load.

Browser Support

For browsers that do not support registerElement we use a registerElement polyfill – in cases where the polyfill is insufficient Pellucid renders as a translucent background without the crystalline blurred effect.

Getting Started

<section is="pellucid-container" data-pellucid-blur="15px">
    <h1>Drag Me&hellip;</h1>
</section>

With the above code Pellucid should create a crystalline background for you! Using the data-pellucid-blur attribute you can define how blurred the background is. Any elements that are appended to the section element will be automatically transposed into a div element with a content class.

Pellucid will render the following HTML structure given the above code:

<section is="pellucid-container" style="...">
    <div class="background" style="...">
        <iframe class="pellucid" src="http://localhost:5000/"></iframe>
    </div>
    <div class="content" style="...">
        <h1>Drag Me…</h1>
    </div>
</section>

By default Pellucid will not make your elements draggable – you can instead use something such as Draggabilly — which is what the example uses.