How To Make Transparent Login Form in Pure html and css3

How to make Transparent Login Form in Pure html and css3 😃😃😃

Transparent Login Form in Pure html and css3 In this video Lecture you will understand how to create transparent and glass effect login form in Css3 and html 5 without using any builtin Plugin only css3 so watch this video from start to end.

Objective:
-----------------------------------------------------------------------------------------------------------
html form controls
transparent form in css3
glass effect form in web designing
full screen background image
login form in html and css

-----------------------------------------------------------------------------------------------------------

Source Code :

First Step Create html Page and Enter Following Code

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="login-box">

<img class="logo" src="Zangief.png">

<h1>Login Form</h1>

<form>

<p>Email</p>

<input type="Email" placeholder="Enter Your Email">

<p>Password</p>

<input type="Password" placeholder="Enter Your Password">

<button type="submit">Login</button>

<a href="#">Forget Password ??</a>

</form>

</div>

</body>

</html>

Now create css style sheet file and add following code

body
{
margin:0px;
padding:0px;
font-family: tahoma;
background-image: url(bgimg.jpg);
background-size: cover;
}
.login-box
{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
height: 550px;
width: 450px;
background-color: rgba(0,0,0,0.8);
color:#fff;
box-sizing: border-box;
padding: 70px 30px;
border-radius: 10px;
}
.logo
{
height: 150px;
width: 150px;
position: absolute;
top:-100px;
left:150px;
}
h1
{
margin:0px;
padding: 0 0 30px;
text-align: center;
font-size: 30px;
}
.login-box p
{
margin:0px;
padding:0 0 20px;
font-weight: bold;
font-size: 20px;
letter-spacing: 3px;
}
.login-box input,button
{
width: 100%;
margin-bottom: 30px;
}
.login-box input
{
border:none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color:#fff;
font-size: 16px;
}
button
{
border:none;
outline: none;
height: 50px;
background: #ef7b00;
color:#fff;
font-size: 20px;
border-radius: 20px;
}
button:hover
{
background: #ed2a51;
}a
{
text-decoration: none;
font-size: 18px;
line-height: 20px;
color: darkgrey;
}
a:hover
{
color:#ed2a51;
}

Now Save It and Check it 😃😃😃.

If you like it please share this blogs with friend and support us
For more videos click this link

How To Make Transparent Login Form in Pure html and css3