Blending Shims with CSS

[Acorn]

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

[Egg Bramhill]

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

I'll look at again tomorrow.

[RKissane]

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

[Acorn]

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