Welcome to TalkGraphics.com
Results 1 to 7 of 7

Thread: Dim background

  1. #1
    Join Date
    Feb 2023
    Location
    England
    Posts
    113

    Default Dim background

    Hi everyone. Is there any way i can dim the page while a popup layer is open?
    Thanks in advance for any tips.

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

    Default Re: Dim background

    Hi Andre, place a black rectangle on the pop-up layer behind the other pop-up content & apply a part transparency.
    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

  3. #3
    Join Date
    Feb 2023
    Location
    England
    Posts
    113

    Default Re: Dim background

    Quote Originally Posted by Egg Bramhill View Post
    Hi Andre, place a black rectangle on the pop-up layer behind the other pop-up content & apply a part transparency.
    Good idea!! Why I never thought of that? How I make sure the whole page will be dimed. Do I make the transparent rectangle full width and height?

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,650

    Lightbulb Re: Dim background

    Quote Originally Posted by Egg Bramhill View Post
    Hi Andre, place a black rectangle on the pop-up layer behind the other pop-up content & apply a part transparency.
    Egg, I appreciate that will work and can be extended for lots of pop-up layers with different fades and reveals, unique to each layer. I am also assuming that "background / dim the page" implies the fading of all items not on the layer.

    My approach places the fade onto one layer that is invoked through the popup: syntax:
    • Create a Layer called Dimming just above MouseOver
      • Create your dim shape, larger than the design page so that if you Scale to Fit Width, the bottom doesn't just end abruptly
      • Give your shape you use to achieve the dimming effect a Name of dim
      • Remove clip to page edges

    • For each layer, use popup: for a control somewhere to close all layers, inclusing Dimming, and open the required layer, here four in total called One, Two, Three & Four:
      • dim - popup: close "Dimming", "One", "Two", "Three", "Four"
        (Use for any other closing object on any layer above Dimming or Sticky object)
      • Control 1 - popup: close "Dimming", "One", "Two", "Three", "Four" open "Dimming", "One"
      • Control 2 - popup: close "Dimming", "One", "Two", "Three", "Four" open "Dimming", "Two"
      • Control 3 - popup: close "Dimming", "One", "Two", "Three", "Four" open "Dimming", "Three"
      • Control 4 - popup: close "Dimming", "One", "Two", "Three", "Four" open "Dimming", "Four"

    • Add embellishments:
      • Reveal Animation on dim - e.g., Light Speed In
      • Linear Transparency
      • Simple linear Fill
      • Controls set as Sticky so always on top
      • Close symbol

    My design: Xara - Fade Background under Layers.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

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

    Default Re: Dim background

    Yes Andre make it full width & height. You could use a textured background if you wish.

    EDIT: Cross posting here Acorn
    Attached Files Attached Files
    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

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,650

    Default Re: Dim background

    Egg, for yours, I suggest you also make the fade wide and tall enough to cover the pasteboard extend. Most Lightbox solutions do just that. If you do you need to untick Clip to page edges.

    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

  7. #7
    Join Date
    Feb 2023
    Location
    England
    Posts
    113

    Default Re: Dim background

    Thank you very much for your effort and your time Acorn and Egg. Both solutions look very interesting. I am going to play with both and see which one apply to my case.
    Thanks again

 

 

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
  •