Hello! In this blog, we will learn how to make login form with HTML and CSS.
When it comes to website design, looks are, like, everything, right? I mean, who wants to visit a site that’s not cool? So, check this out, we’re talking about login forms with a transparent background effect. But hold up, we’re only talking about how they look.
The Visual Coolness of Transparency
Transparent background login forms are, like, totally what’s up! It’s basically a login form with a background that’s kinda see through. But the real deal is how they make the login form look, and that’s what we are gonna dive into.
Subtle Swag
These transparent background login forms have, like, this subtle swag to them. They let some of the background show through, and it’s all classy and elegant. You know, it is like the website just got a makeover and looks all fancy.
Depth and Vibes
It’s not just about looking flat, these forms have depth and vibes, man. They blend in with the whole webpage, like they are part of the crew. This 3D feel is, like, so visually pleasing and makes you wanna check out what’s going on.
Chillin in Harmony
The goal here is to chill and vibe in harmony with the rest of the content. These forms don’t disrupt the flow of the webpage, they’re like the cool kid who fits in effortlessly. It’s all about keeping that good vibe going and making the site look tight.
Crafting the Look
These transparent background login forms are all about the look, dude. But let’s break down what makes look awesome.
Keepin It Simple
These forms are all about simplicity. No clutter, no extra stuff, just clean lines and the important login stuff. Simplicity is key, it makes the form look slick and easy to use.
Smart Placement
They don’t just plop these forms anywhere, it’s all about smart placement. They put where it makes sense, so you can log in without hassle, and it all looks smooth and seamless.
Eye Catching Style
Designers use some cool tricks to make sure you notice the login form first. It’s all about contrast, size, and where they put it, they want you to be like, “Heyy, this is where I login” It’s all about making it easy for you.
Don’t Forget Everyone
Okay, we’re all about the looks, but we can’t forget about everyone, right? These forms need to be cool for everyone to use.
Keepin It Readable
We gotta make sure the text and stuff on the form are easy to read. No one wants to squint or strain their eyes, man. Good contrast is the name of the game.
Everyone Invited
We can’t leave anyone out, so designers check these designs with screen readers and tech that helps folks with disabilities. Everyone should be able to vibe with the website without a hitch.
You Might Also Like This:
- Animated Login Form using HTML and CSS Only
- How to Make a Website with Text Animation Effects using Only HTML & CSS
- How To Make Popup In HTML CSS & Javascript
Video Tutorial:
How to make login form with HTML and CSS.
Source Files – Login Form HTML CSS
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page HTML CSS | Codehal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<form action="">
<h2>Login</h2>
<div class="input-group">
<span class="icon">
<ion-icon name="person"></ion-icon>
</span>
<input type="text" placeholder="Username" required>
</div>
<div class="input-group">
<span class="icon">
<ion-icon name="lock-closed"></ion-icon>
</span>
<input type="password" placeholder="Password" required>
</div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a>
</div>
<button type="submit" class="btn">Login</button>
<div class="sign-link">
<p>Don't have an account? <a href="#" class="register-link">Register</a></p>
</div>
</form>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>CSS Code:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: url('background.jpg') no-repeat;
background-size: cover;
background-position: center;
}
.wrapper {
position: relative;
left: -10%;
display: flex;
justify-content: center;
align-items: center;
width: 400px;
height: 500px;
box-shadow: 0 0 60px #000;
border-radius: 10px;
}
h2 {
font-size: 2em;
color: #fff;
text-align: center;
}
.input-group {
position: relative;
width: 320px;
margin: 30px 0;
}
.input-group input {
width: 100%;
height: 40px;
font-size: 1em;
color: #fff;
padding: 0 10px 0 35px;
background: transparent;
border: 1px solid #fff;
outline: none;
border-radius: 5px;
}
.input-group input::placeholder {
color: rgba(255, 255, 255, .3);
}
.input-group .icon {
position: absolute;
display: block;
left: 10px;
color: #fff;
font-size: 1.2em;
line-height: 45px;
}
.forgot-pass {
margin: -15px 0 15px;
}
.forgot-pass a {
color: #fff;
font-size: .9em;
text-decoration: none;
}
.forgot-pass a:hover {
text-decoration: underline;
}
.btn {
position: relative;
width: 100%;
height: 40px;
background: #00c2a7;
box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
font-size: 1em;
color: #fff;
font-weight: 500;
cursor: pointer;
border-radius: 5px;
border: none;
outline: none;
transition: .5s;
}
.btn:hover {
background: #fff;
color: #00c2a7;
}
.sign-link {
font-size: .9em;
text-align: center;
margin: 25px 0;
}
.sign-link p {
color: #fff;
}
.sign-link p a {
color: #00c2a7;
text-decoration: none;
font-weight: 600;
}
.sign-link p a:hover {
text-decoration: underline;
}Conclusion
So, there you have it, my fellow internet surfer. Transparent background login forms are like the rockstars of web design. They bring the style, the depth, and the vibes. While we’re all about looks, let’s not forget about making it work for everyone. When done right, these forms add some serious coolness to the website, making it look and feel epic.