unnecessary css property in an interactive element

[Denis-GH]

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

[github-actions[bot]]

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.

[bsmth]

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?

[Denis-GH]

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.