Welcome to TalkGraphics.com
Results 1 to 2 of 2
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,651

    Lightbulb Adding a dynamic Blur

    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
    Acorn - installed & active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,880

    Default Re: Adding a dynamic Blur

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

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •