In
this modern era there is no one who live without having any Password or PIN in their
daily usage. If not many, at least one or two will be there like ATM Card PIN,
Mobile Password and others. Normally, people keep a record either in a diary or
in a piece of paper which sometimes may lose it. Anyway, today there is
something new when you are working in a computer and want to record your
password in a secure place then, keep reading this post till end to find your
fitting place to do so.
Open
any text editor like Notepad, Notepad ++, Sublime Text, WordPad and others then
start your coding by following this tutorial. Please follow step by step to get
your work easier.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Your Secret</title>
</head>
<body>
<div class="display">
You can display anything here if you want.
</div>
<div class="hide">
Your Password123 goes here!
</div>
</body>
</html>
CSS
<style>
.display{
width: 1500px;
background-color: #fff;
font-family: arial;
font-size: 25px;
text-align: center;
}
.hide{
width: 1500px;
background-color: #fff;
font-family: arial;
font-size: 25px;
text-align: center;
color: #f30b;
}
</style>
Using
the above codes, you will find that the password or PIN is visible in the web
page because of the text colour. Even though you try to remove the text colour
from the <style> section it will not give you a good result due to the
presence of the default text colour and it will definitely display in the web
page.
Hide
Using Text Colour
Changing
the text colour to white will make your Password or PIN invisible. You can use
either of them to replace the existing text colour code.
color:#fff;color:#ffffff;color:white;#fff;
is the hexadecimal of white colour code, you can either write with three
characters or six characters as #ffffff; and the result will be the same. In
case you find difficulty to remember then, write the colour name ‘white’ and
that is it.
Now
you will see that the password is hidden. But there is a disadvantage using the
white colour or white colour code #fff; or #ffffff; for your password text. You
know, the password is not hidden from the web page displayed in the browser, if
you drag the cursor in the web page you will find it. But how to hide it
completely? The only way to hide your Password or PIN completely from the web
page displayed in the browser is by following this simple method.
opacity: 0;Instead
of changing the text colour, you can add the opacity for it. Once the opacity
is added then, refresh your browser and boom! You win the process of hiding and
keeping your password in a more secured way.
Hope this tutorial helps you solve your problem. Please leave us your comments below.
0 Comments