CODEWITHSUNDEEP
javascriptcss
Aritra Hazra
Aritra Hazra

Reputation: 524

How to blur a text and make it unreadable programmatically on a web page

I wanna make something like this page
Fonts (comments) are blurred and selectable but not pasteable. how to do something like this?

Upvotes: 7

Views: 11935

Answers (1)

Manwal
Manwal

Reputation: 23836

Blur effect, you can do this with css:

.textshadow {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

DEMO Details

The following css to prevent from copying text of web page.

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

Demo Details

There is also another way to prevent text from copying:

<p onmousedown='return false;' onselectstart='return false;'>Lorem ipsum</p>

Demo

Update

Site Text using SVG Blur effect. Here is Details. This effect does't prevent it from coping text, reason behind you can't copy it because of there are not showing you text but these are blank spaces &nbsp; you can see it also using developer tool.

FEATURED DEMO

Upvotes: 26

Related Questions