Open Denis-GH opened 4 months ago
It looks like this is your first issue. Welcome! 👋 One of the project maintainers will be with you as soon as possible. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.
Thanks for raising this one and for the great suggestion. Here's the source CSS https://github.com/mdn/interactive-examples/blob/main/live-examples/css-examples/backgrounds-and-borders/background-clip.css#L2
text-shadow on an interactive element prevents the "background-clip: text" property from being demonstrated
I understand what you mean, but I think the example is working as the author intended relative to the other values. We could add text-shadow: none;
to the last display option:
background-clip: text;
-webkit-background-clip: text;
color: transparent;
text-shadow: none;
but it's starting to get a little crowded for information (and it shows there's an interaction with text-shadow
with this property), so I'm leaning towards leaving as-is in this case. What do you think?
Thanks for the reply! I agree that we shouldn't add text-shadow: none; to the last display option. But I wouldn't want to leave it as-is, because the shadow is on top of the text and it looks like just black text, that's obviously not what the author wanted to show. To move the shadow under the text we can do something like this:
<div class="text-container">
<span class="text">Text</span>
<span class="text-shadow">Text</span>
</div>
but that doesn't make sense in this interactive element, so I suggest just removing the text-shadow property from the source code.
What information was incorrect, unhelpful, or incomplete?
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
text-shadow on an interactive element prevents the "background-clip: text" property from being demonstrated
What did you expect to see?
You just need to remove the text-shadow from the text "This is the content of the element."
so that it would be like this:
Do you have any supporting links, references, or citations?
No response
Do you have anything more you want to share?
No response