Glass Text

[Acorn]

Here is an effect that shows up text as transparent yet always defines the outline of each letter so it remains legible in all cases(!)

A text area is Cloned and displaces slightly. You could add a Line width.
The text on top should be White.
The text under can be White for the clearest glass. Darker grey make it more opaque.
Colouring can enhance the colour it is covering so it appears magnified or distorted.

The effect is then applied with the ClassName htmlclass="mbm-difference" added to the original and its nudged clone.
The text is rendered as text so stays sharp at scale.

It is where the two copies do not overlap that is special.
The overlap cancels and you get a straight punch-through (with added opacity).
Elsewhere, the area returns the opposite to the colour underneath.

CSS - Glass Text.xar



Acorn