unnecessary css property in an interactive element about interactive-examples HOT 3 OPEN

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.

from interactive-examples.

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?

from interactive-examples.

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.

from interactive-examples.