Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jsnkuhn opened this issue Nov 7, 2024 · 3 comments

Comments

@jsnkuhn
Copy link

jsnkuhn commented Nov 7, 2024

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

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. 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

@Loirooriol
Copy link
Contributor

Loirooriol commented Nov 7, 2024

#10696 introduces the union of border-area and text, and also mentions the idea of doing intersections.
I guess what this would need is the intersection of content-box/padding-box/border-box with the complementary of text.

@jsnkuhn
Copy link
Author

jsnkuhn commented Nov 7, 2024

Is the idea then something more like a mask-composite but for background-clip? What other combinations would be of value?

I feel like a simple keyword for this would more straight forward for devs.

@Loirooriol
Copy link
Contributor

It could be a keyword that represents the intersection of border-box with the complementary of text (just like border-area is the intersection of border-box with the complementary of padding-area). And then have some way to intersect that with padding-box, content-box, or even border-area.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants