Welcome to TalkGraphics.com
Results 1 to 4 of 4
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,334

    Lightbulb Blending Shims with CSS

    Xara provides a number of Transparency types that can be applied to images, shapes and text for a variety of effects.
    Each application results in a image being generated for the final result.
    You might just accept that for images but destroying text, making it not Accessibly and ultimately blocky in appearance is not acceptable.
    Equally, every effect, even to copies of the same image, will result in a different and separate image.
    You have seen this image profusion with graphical Bullets and Xara NavBars and Buttons.

    Xara changed its Transparencies in version 11, http://www.xaragroup.magix.net/XDP11/page-1.htm
    New Blend Modes (Transparency Types)
    The Transparency Types have been updated to be compatible with W3C (World Wide Web Consortium) standards. Mix, Stained Glass, and Bleach have been renamed using their industry standard names: Normal, Multiply, and Screen. Luminosity and Color have been modified to match W3C standards. Enhance remains the same (Enhance uses the Photo Tools > Enhance controls to adjust the transparency). Three new transparency types have been added: Overlay (a combination of Screen and Multiply) and can used to boost the contrast of an image. Hard Light and Soft Light are similar to Overlay but in slightly different ways.
    An old explanatory guide is here: https://alistapart.com/article/blend...s-demystified/.
    In the registry (at your own risk), you can re-activate the old transparencies with setting Computer\HKEY_CURRENT_USER\SOFTWARE\Xara\XtremePro Sub x64\18\Options\Displays\ShowLegacyTransparencyType s to 1.

    My alternative avoids text blockiness, the production of hordes of images, keeps text as text and maintains Accessibility.
    Essentially, you place a Shim, a shape that matches what you want to cover, or apply directly to a Text Area.
    The Shim has a ClassName, htmlclass="mbm-..." applied and that's it.
    There are 15 ClassNames to choose from, as demonstrated.
    Each Shim or text has its own Fill and Stroke colours applied as you choose and, depending on the transparency type, this affects the rendering of the shapes under the Shim.

    CSS - Shims.xar

    Do check there is effectively only one image in play.
    Try using the Xara approach to see the difference.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,895

    Default Re: Blending Shims with CSS

    Hi Acorn, trying to see your point but mainly it's like a bad trip....

    I'll look at again tomorrow.
    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
    Jul 2015
    Location
    Currently New York State
    Posts
    663

    Default Re: Blending Shims with CSS

    Acorn,

    So when you preview the site the purple widget is not displayed and the text underneath it is. Is this because your purple widget is only acting as a CSS Style sheet and Xara does not make it a shape on the site? I found that you need this widget for everything to work.

    During the preview, when I move the cursor over the display, the top row of objects become visible while the others are already visible. I understand this is because of them being on the mouse off layer. Was there a reason you did this or are you just demonstrating what could be done?

    Thanks
    Ray

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,334

    Default Re: Blending Shims with CSS

    Quote Originally Posted by RKissane View Post
    Acorn,

    So when you preview the site the purple widget is not displayed and the text underneath it is. Is this because your purple widget is only acting as a CSS Style sheet and Xara does not make it a shape on the site? I found that you need this widget for everything to work.

    During the preview, when I move the cursor over the display, the top row of objects become visible while the others are already visible. I understand this is because of them being on the mouse off layer. Was there a reason you did this or are you just demonstrating what could be done?

    Thanks
    Ray
    Ray, yes to all.

    The Purple block is a Placeholder whose sole purpose is to enable the CSS.
    You either copy it into your Design or paste its contents into your Website Head so you don't need it being copied into each webpage.

    If you only wanted one effect, you could prune back and only keep that one.
    The overhead of the full CSS is really trivial.

    I had not intended to add the top four to the MouseOver layer as, unfortunately, Xara still has a Bug and MouseOver boxes get converted to images for no reason.
    As they are there, then yes it does show you can place a Shim on the MouseOver layer and providing the underlying shape has a 50+% overlap and a link, then you get a hover event.

    The current CSS does not work with Reveal Animations or Stretches!
    It does with Scroll ones though.

    My aim was to minimise image proliferation.
    Xara is getting there but has several half-baked implementations that impede.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

 

 

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
  •