Today’s blog introduces an animated login form with dynamic background changes using HTML and CSS. The tutorial delves into crafting an engaging login interface where backgrounds transition, enhancing the visual appeal and user experience.
HTML forms the foundation, housing input fields for usernames, passwords, and a submission button. CSS injects life into this structure, enabling seamless transitions and background alterations, creating an interactive login experience.
The step-by-step guide covers HTML setup for form elements and CSS implementation to stylize the form and orchestrate dynamic background changes. The end result is a visually captivating login form that captures user attention with its fluid background transitions.
HTML :
This HTML code sets up the basics for an animated login form. It includes fields for email, password, a remember-me checkbox, and links for password recovery and registration. The code references Ionicons for icons and an external stylesheet named “style.css” for design. It structures the form within a ‘wrapper’ div and applies styling using specific classes.
However, it awaits additional styling and scripting for dynamic background changes and interactive features.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Animated Login Form with Changing Background</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
<div class="login-box">
<form action="">
<h2>Login</h2>
<div class="input-box">
<span class="icon">
<ion-icon name="mail"></ion-icon>
</span>
<input type="email" required>
<label>Email</label>
</div>
<div class="input-box">
<span class="icon">
<ion-icon name="lock-closed"></ion-icon>
</span>
<input type="password" required>
<label>Password</label>
</div>
<div class="remember-forgot">
<label><input type="checkbox"> Remember me</label>
<a href="#">Forgot Password?</a>
</div>
<button type="submit">Login</button>
<div class="register-link">
<p>Don't have an account? <a href="#">Register</a></p>
</div>
</form>
</div>
</div>
<!-- partial -->
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js'></script>
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js'></script>
</body>
</html>
CSS :
This CSS code customizes an animated login form. It uses the Montserrat font, resets spacing, and defines the layout. The ‘wrapper’ class creates a background with an animated color shift. ‘login-box’ styles the form, adding a blurred effect and borders. Input fields, labels, and buttons get a clean design with smooth transitions. It adjusts for smaller screens too.
The ‘animateBg’ rule rotates the background colors for a dynamic effect.
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
margin:0;
padding:0;
box-sizing:border-box;
font-family: 'Montserrat', sans-serif;
}
.wrapper {
display:flex;
justify-content:center;
align-items: center;
height:100vh;
width:100%;
background:url('http://codingstella.com/wp-content/uploads/2024/01/download-5.jpeg') no-repeat;
background-size:cover;
background-position:center;
animation:animateBg 5s linear infinite;
}
@keyframes animateBg {
100% {
filter:hue-rotate(360deg);
}
}
.login-box {
position: relative;
width: 400px;
height: 450px;
background: transparent;
border-radius: 15px;
border: 2px solid rgba(255,255,255,.5);
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(15px);
}
h2 {
font-size:2em;
color:#fff;
text-align:center;
}
.input-box {
position:relative;
width:310px;
margin:30px 0;
border-bottom:1px solid #fff;
}
.input-box label {
position:absolute;
top:50%;
left:5px;
transform:translateY(-50%);
font-size:1em;
color:#fff;
pointer-events:none;
transition:.5s;
}
.input-box input:focus ~ label,
.input-box input:valid ~ label {
top:-5px;
}
.input-box input {
width:100%;
height:50px;
background:transparent;
border:none;
outline:none;
font-size:1em;
color:#fff;
padding:0 35px 0 5px;
}
.input-box .icon {
position:absolute;
right:8px;
top:50%;
color: #fff;
transform: translateY(-50%);
}
.remember-forgot {
margin:-15px 0 15px;
font-size:.9em;
color:#fff;
display:flex;
justify-content:space-between;
}
.remember-forgot label input {
margin-right:3px;
}
.remember-forgot a {
color:#fff;
text-decoration:none;
}
.remember-forgot a:hover {
text-decoration:underline;
}
button {
width:100%;
height:40px;
background-color:#fff;
border:none;
border-radius:40px;
cursor:pointer;
font-size:1em;
color:#000;
font-weight;500;
}
.register-link {
font-size:.9em;
color:#fff;
text-align:center;
margin:25px 0 10px;
}
.register-link p a {
color:#fff;
text-decoration:none;
font-weight:600;
}
.register-link p a:hover {
text-decoration:underline;
}
@media (max-width:500px) {
.login-box {
width:100%;
height:100vh;
border:none;
border-radius:0;
}
.input-box {
width:290px;
}
}
To wrap up, we’ve built a cool animated login form using HTML and CSS. We’ve covered the structure and style, making it engaging with dynamic elements. Now, it’s your canvas! Add your touch and try out more animated login designs to level up your skills.
If you face any challenges during the creation of your animated login form, don’t worry. You can easily access the source code files for this project at no cost. Just click the Download button to get started. Happy coding!
