[csswg-drafts] [css-backgrounds-4] Possible `background-clip` value to punch holes in the background layer in the shape of font charatcters (#11160)

jsnkuhn has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-backgrounds-4] Possible `background-clip` value to punch holes in the background layer in the shape of font charatcters ==
A `background-clip` value to punch holes in the `background-color`/`background-image` in the shape of font characters as seen below:

![knock-out-text](https://github.com/user-attachments/assets/069d3878-2836-44b6-b6a0-aa0aeb06c651)

possible value name?:

text-cut
text-punch
mask-text
knockout-text (photoshop term)


This is doable right now in CSS with `mix-blend-mode` but has a limitation where the background must be white or black.
https://www.w3schools.com/howto/howto_css_cutout_text.asp


Other methods to do this now can be found on this Stack Overflow question with 119k views over almost 12 years. To put this in context that's an average of 27 views per day:
>Transparent text cut out of background
>https://stackoverflow.com/questions/13932946/transparent-text-cut-out-of-background


Knockout option in Photoshop:
https://helpx.adobe.com/photoshop/using/knockout-reveal-content-layers.html

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11160 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 7 November 2024 02:24:08 UTC