Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Glass Text

  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Lightbulb Glass Text

    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

    Click image for larger version. 

Name:	2021-10-18 17.28.03 localhost e4f2fd8ac57f.jpg 
Views:	84 
Size:	73.8 KB 
ID:	130841

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Glass Text

    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.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	watermark.jpg 
Views:	60 
Size:	149.1 KB 
ID:	130842  

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Glass Text

    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  4. #4
    Join Date
    Apr 2014
    Location
    Michigan
    Posts
    70

    Default Re: Glass Text

    Good work -

  5. #5
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

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

    Lightbulb Re: Glass Text

    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  7. #7
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Glass Text

    Sounds like a good solution ;-)
    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

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Glass Text

    Quote Originally Posted by Egg Bramhill View Post
    Sounds like a good solution ;-)
    Thanks Egg, I hope it looks good too.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  9. #9
    Join Date
    Feb 2007
    Location
    UK
    Posts
    21,283

    Default Re: Glass Text

    does that method block screen capture ?
    -------------------------------
    Nothing lasts forever...

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Glass Text

    Quote Originally Posted by handrawn View Post
    does that method block screen capture ?
    No. It's identical to what you would do if you placed a transparent shim, used by Gary P and Egg, over the image. As I said before, if you can see it, you can get it. I only suggested it to suggest you should look beyond the examples to grasp the concept. Also hate the JS right click blockers.

    The only useful mechanism is watermark stenography, which is expensive.
    Xara delivers static websites so there's no server code to handle matters.
    I once sliced an image and its B&W copy and set them out so only the slice under the mouse showed up in colour; it's fine for an effect but not for every image.

    There's no real way once it's out there.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

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
  •