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

[gwpriester]

Interesting technique but self defeating really unless the intent is to create letters that look like glass. Say for a book title, The Glass is Half Empty.

The whole point of displaying an image with a copyright watermark is to protect the image from being copies then used without permission. But in our case, the image must be clear enough that a customer shopping for a stock image can see the image.

Shutterstock does this as well as anybody.

[Acorn]

Gary, I think you have totally missed the point.

I just used a random image and text to illustrate how it works. I was not claiming any solution to copyrighting as it is not possible because if I can see it, I can copy it.

I presented two examples. Both were showing the outcome. The particular benefit is for unobtrusive labelling and for Accessibility.
Text with no Fill and a thin line might work until you hit a black area; this method is always contrasted.

Acorn

[Jeffdoute]

Good work -

[gwpriester]

OK.

[Acorn]

If anyone is interested, a method often promoted to stop people saving their images is to block right-clicks on the page.
This uses JavaSrcipt so anyone can just disable JavaScript and regain a copy operation.

Here is a CSS approach that is fairly novel. Do note it can still be cracked but to most they won't notice anything unusual so won't go looking for the means to overcome it.

• Create a Layer called !Blockers and keep it shut. The bang (!) ensures it contents are always published.
• Add this CSS to the website code (head): <style> .mbm-difference { mix-blend-mode: difference; } </style>
• Place a White, actually any solid colour, box to cover the entire image.
• Add the ClassName htmlclass="mbm-difference" to the box.
• Clone it.
• Move both to the !Blockers layer.
• Preview and right-click on the image - nothing to save.
• Click-drag the image - nothing.

This is the exact same technique we started with, without a nudge.
If a link is required you add it to the topmost white box.

Acorn