What are some techniques for disguising text on a website to give the illusion of being in English but is actually impossible to read

I am seeking a way to obscure text by rendering it completely unintelligible.

While this task is easily accomplished in handwriting, I require a method for achieving this on a webpage using the Verdana font.

One idea I had was to create a Verdana-style font where the top and bottom halves of letters are swapped, or to overlap lines of text to create a jumbled appearance.

Another option could involve using DeepStyle images instead of traditional text.

What would be the most effective approach to achieve this goal?

cssfontshtml

Answer №1

Maybe we could try using a text-shadow technique?

#obscure {
text-shadow: 0.1em 0.1em,
      -0.1em 0.1em,
      0.1em -0.1em,
      -0.1em -0.1em;
}
<p id="obscure">Hidden enough?</p>

Answer №2

Even though this question may have been closed, I still have something to share. Drawing inspiration from a tutorial on CSS-Tricks about creating blurry text effects, I added my own twist to it.

p {
    font-family: verdana;
    text-decoration: line-through;
}

.blur {
   color: transparent;
   text-shadow: 0 0 7px rgba(0,0,0,0.5);
}
<p class="blur">
    Now that we know who you are, I know who I am. I'm not a mistake! 
It all makes sense! In a comic, you know how you can tell who the 
arch-villain's going to be? He's the exact opposite of the hero. 
And most times they're friends, like you and me! I should've known 
way back when... You know why, David? Because of the kids. They 
called me Mr Glass.
</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent Bootstrap 4 from causing content to shift downwards when collapsing

Currently, I am utilizing Bootstrap 4 Collapse and it is functioning flawlessly. However, I am interested in making a slight adjustment. Is there a method to prevent the collapse from pushing down the content below it and instead have it overlap? If this i ...

csstwitter-bootstrapbootstrap-4

Error loading the website on Firefox

The background image in my CSS code is not displaying in the browser. I am currently working in the CodeIgniter framework and using Firefox. #star ul.star { list-style:none; margin:0; padding: 0; width:85px; height:20px; left: 10px; top:4px; pos ...

csscodeigniterfirefox

Using the power of Selenium's XPath, we can easily navigate through a table to access

Looking for assistance in creating selenium xpath for the various column links within a table. Each row has a unique identifier and contains information about a product, including the name. Based on the product name, I need to locate other links within the ...

cssxpathselenium

Create a regular expression to identify and substitute incorrect HTML properties

It's a harsh reality that my regex skills are lacking. Upon revisiting an old project, I stumbled upon some code that definitely needs attention. Take a look: strDocument = strDocument.Replace("font size=""1""", "font size=0.2") strDocument = strDocu ...

htmlvb.netregex

Is there a way for me to retrieve the header values of a table when I click on a cell?

I have a project where I am developing an application for booking rooms using Angular 2. One of the requirements is to be able to select a cell in a table and retrieve the values of the vertical and horizontal headers, such as "Room 1" and "9:00". The data ...

htmlcssangulartypescript

Is there a way to extract a variable value from an external webpage in order to manipulate

Although I am not well-versed in PHP, I believe it may be the most suitable solution for achieving my goal. I want to extract the value of a variable from an external page in order to process it for generating graphs and statistics on my own webpage. The s ...

phphtmlvariablespostget

Placing a Div element outside of a Flexible Grid Layout

I am currently in the process of developing a responsive website using HTML5, CSS3, jQuery, and Media Queries. One challenge I am facing involves a page containing a gallery of images within a 16-column grid that adjusts nicely for various screen sizes, i ...

jqueryhtmlcssresponsive-designposition

How can I implement Jquery ajax calls in various JavaScript functions?

I'm encountering an issue with a particular function in my code function readComm(){ $.post("something.php", {read:"read"}, function(data){ retVal = $.trim(data).toString(); console.log(retVal); return retVal; }); } T ...

javascriptjqueryhtmlfunctionreturn-value

Retrieve a collection of nested dictionaries containing flask and angular data

In my app development journey with flask and ionic(angular), I'm working on returning a JSON list. Here's the python code snippet: def get-stocks(): # Select all stocks cursor.execute("""SELECT * FROM `tbl_symbol_index`"" ...

htmlangulartypescriptionic2

How to style text alignment and create a toggle button using HTML and CSS

My attempt at creating a custom toggle button using an HTML input checkbox and custom CSS has resulted in a misalignment between the text and the toggle button itself. Despite my efforts to adjust margins, padding, and heights, I have been unable to resolv ...

htmlcsscheckbox

Limiting the scrolling capability within a flex container by using the nowrap

When using flex with nowrap, it appears that the horizontal scroll bar only allows moving to the right while the items on the left remain hidden. To demonstrate this issue, I have created a sample on CodePen: http://codepen.io/anon/pen/QpgvoZ This behavio ...

cssflexboxscrollbarnowrap

Blank area located at the bottom of the document

I'm having trouble designing a webpage without a scroll bar because there isn't much content to display on the page. I've tried searching for solutions and following steps to fix the issue, but I haven't had any success. If anyone can a ...

javascripthtmljquerycssbootstrap-4

What is the method in jQuery to add a left alignment style to every element on the page?

I need jQuery to automatically add style="text-align: left;" to all elements throughout my webpage. My initial approach would be something like this: $('everything-in-the-page').each( ... However, I am a bit unsure about how to properly target ...

jqueryhtml

JavaScript can be used to deactivate the onclick attribute

Is there a way to deactivate one onclick event once the other has been activated? Both divs are initially hidden in the CSS. I'm new to programming, so any help is appreciated. Markup <a id="leftbutton" href="#" onclick="showDiv(this.id); return ...

javascriptcsshtmlonclick

What are some effective ways to stretch specific muscles?

I am facing an issue with my select element. The default value is "please choose," but there are options like "Accommodation & Hotels" that are longer and not clearly visible on IE browsers, though they work fine in Firefox. How can I resolve this issue? S ...

javascripthtmlcss

The issue arises when the mat-panel-description is not properly aligned with the shrinking panel

Within my HTML, I have a mat-panel with a description that is populated by a variable from the TS file. However, I am encountering an issue where if I shrink the panel and the description is too long, the text is cut off at the top and bottom. Is there a w ...

cssangularangular-materialmat-expansion-panel

Is there a way to invoke a class method from the HTML that is specified within its constructor function?

class Welcome { constructor() { this.handlePress = this.handlePress.bind(this); this.htmlContent = `<a onclick="this.handlePress">Link</a>`; } handlePress(e) { console.log('planet'); } } The HTML structure appears ...

javascripthtmlclassconstructorevent-handling

Tips for eliminating any default white space visible between tags:

What is the best way to eliminate white space gaps between div tags and adjust pixel differences between them in HTML code? My current alignment is off and there are noticeable white spaces between div tags. I have tried using a reset link but it didn&apo ...

jqueryhtmlcss

Is it possible to incorporate HTML and CSS into Kivy and Python 3 development?

Currently in the process of creating a multi-touch kivy program using Python 3.52 on Linux. While Kivy is effective, I've encountered challenges with GUI development and experienced laggy animations. I've noticed that my program tends to slow do ...

pythonhtmlcssembeddedkivy

The CSS scrollbar is visible on the screen, but for some reason,

I'm seeking a solution to enable scrolling within a div container that can scroll both horizontally and vertically. body { height: 100%; width: 100%; overflow: hidden; } .wrapper { width: 75%; padding: 0px 5px 0px 8px; top: 20px; whit ...

htmlcss