Adding a dynamic Blur

[Acorn]

I noticed Xara included a Blur overlay for one of its templates and the description on how to replace the image underneath was mystical.

Blur under is a very simple CSS feature that runs on most browsers these days without vendor prefix.
The CSS is as simple as <el> : { backdrop-filter: blur(<size>); }
<size> is a CSS length dimension, say, 8px or more interesting 1vw.
Here my <el> is a Classname of either blur or fadeBlur.

The CSS for all this is in the Website Head.
Each box you want to blur needs a Name of htmlclass="blur" or htmlclass="fadeBlur."

At its simplest, you create a box with no Fill (very trick to subsequently grab).
I usually add a Line Width of 0px (different to None!).
You can introduce a Contour for border styling that is quite effective.
This box sits over anything and blurs what is under it.
The CSS makes is White translucent so with a fixed value of 6px you get a glass effect.

If you want something more tangible with a Fill (include some transparency) then you need to add a little Placeholder body code as well as the Name.
The HTML is: <span style='width: 100%; height: 100%;'></span>.
Where this works well is in a Text Panel where the Panel has the Name and Placeholder code and the Text sits on top.
I've make one that is Sticky so when toy scale or scroll you see the detail underneath changes harmoniously.
Obviously the Panel could be in a pop-up layer.

You can use it for reveals or to hide away unwanted detail.
A recent exercise to fade items under a pop-up layer is perfect for this approach.

Demonstration: CSS - Blur Overlay.xar

Acorn

[Egg Bramhill]

I like that a lot Acorn. Very simple, quick & very effective. I'll have a play-around. Thanks.