I am blurring my container text using text-shadow with below code:
.blur-style{
color: transparent;
text-shadow: 0 0 15px rgb(128,128,128);
}<div class="blur-style">This is blurred text.</div>It works fine. However, the text is clearly visible when I highlight it! Desired behavior: Text should remain in its blurred state upon highlighting.
Please help.
I think you're best bet is to just PREVENT selecting that particular text. Neither really prevents a motivated user from getting the text directly from the DOM.
.blur-style{
color: transparent;
text-shadow: 0 0 15px rgb(128,128,128);
user-select: none;
}<div class="blur-style">This is blurred text.</div>Add this property ::selection selector to your css. The ::selection selector matches the portion of an element that is selected by a user.
Only a few CSS properties can be applied to the ::selection selector: color, background, cursor, and outline.
.blur-style{
color: transparent;
text-shadow: 0 0 15px rgb(128,128,128);
}
.blur-style::selection {
color: transparent;
text-shadow: 0 0 15px rgb(128,128,128);
}<div class="blur-style">This is blurred text.</div>Copy your code and add the ::selection pseudostyle.
Add this:
.blur-style::selection {
color: transparent;
text-shadow: 0 0 15px rgb(128,128,128);
}