Table of Contents
As coding enthusiasts, delving into the realm of web development often involves mastering the art of crafting visually appealing yet functional elements for websites. One such element is the Login Form, a foundational component crucial for user interactions. Have you ever marveled at those trendy login forms embellished with intriguing effects? Today, let’s learn how to create Login Form using HTML & CSS from scratch!
Introduction:
Exploring the world of web design often unveils captivating design trends, among which the translucent and blurred glass surface effect stands out prominently. This effect bestows an ethereal and modern aesthetic, seamlessly merging the background and foreground elements. Are you ready to dive into crafting your very own Login Form adorned with such a stylish effect?
In this beginner-friendly guide, I’ll walk you through the process of creating a Login Form using HTML & CSS. Not only will you master the art of crafting forms, but you’ll also infuse them with a stunning glass-like effect while incorporating an engaging floating-label animation.
Steps to Create Login Form Using HTML & CSS:
Let’s get started on this exciting journey by following these straightforward steps of Creating a Login From using HTML & CSS –
- Folder Setup: Begin by creating a folder for your project. Name it as per your preference. Inside this folder, create the necessary files.
- HTML File: Craft an
index.htmlfile. Remember, it should be named ‘index’ with the extension ‘.html’. - CSS File: Develop a
style.cssfile, ensuring it’s named ‘style’ with the extension ‘.css’.
Step 1. HTML Structure (index.html):
Copy the provided HTML code into your index.html file. This code includes the necessary HTML elements like forms, inputs, buttons, and links. The form elements are equipped with the “required” attribute for basic input validation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Login Form with Rotating Circles Background</title>
</head>
<body>
<div class="container">
<span style="--clr:#eeff00;"></span>
<span style="--clr:#00ffdd;"></span>
<span style="--clr:#e900d5;"></span>
<div class="form-container">
<h2>Login form</h2>
<div class="input-container">
<input type="text" placeholder="Username">
</div>
<div class="input-container">
<input type="password" placeholder="Password">
</div>
<div class="input-container">
<input type="submit" value="Sign in">
</div>
<div class="links-container">
<a href="#">Forget Password</a>
<a href="#">Signup</a>
</div>
</div>
</div>
</body>
</html>Step 2. CSS Styling (style.css):
The magic lies in styling! Copy the CSS code provided into your style.css file. These lines of code infuse life into your login form, delivering the captivating effect and the delightful floating label animation. CSS properties like blur, background, and transitions are pivotal to achieving this.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: -webkit-linear-gradient(to right, #272727, #000000);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #202020, #000000);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
width: 100%;
overflow: hidden;
}
.container {
position: relative;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.container span {
position: absolute;
inset: 0;
border: 2px solid #fff;
transition: 0.5s;
}
.container span:nth-child(1) {
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
animation: animate 6s linear infinite;
}
.container span:nth-child(2) {
border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
animation: animate 4s linear infinite;
}
.container span:nth-child(3) {
border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
animation: animate2 10s linear infinite;
}
.container:hover span {
border: 6px solid var(--clr);
filter: drop-shadow(0 0 20px var(--clr));
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.form-container {
position: absolute;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
}
.form-container h2 {
font-size: 2em;
color: #fff;
}
.input-container {
position: relative;
width: 100%;
}
.input-container input {
position: relative;
width: 100%;
padding: 12px 20px;
background: transparent;
border: 2px solid #fff;
border-radius: 40px;
font-size: 1.2em;
color: #fff;
box-shadow: none;
outline: none;
}
.input-container input[type="submit"] {
width: 100%;
background: #0078ff;
background: -webkit-linear-gradient(to right, #240b36, #c31432);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #240b36, #c31432);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border: none;
cursor: pointer;
}
.input-container input::placeholder {
color: rgba(255, 255, 255, 0.75);
}
.links-container {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.links-container a {
color: #fff;
text-decoration: none;
}Conclusion:
Through this walkthrough, you’ve ventured into the creation of your login form using HTML & CSS exclusively. By following these steps, you’ve empowered yourself to craft an engaging and visually appealing login form.
Remember, this is just the beginning! Don’t hesitate to personalize and fine-tune your creation. Embrace experimentation to add your unique touch and further elevate the form’s aesthetics. For continuous growth in your HTML and CSS skills, consider exploring and recreating various login form designs available across coding platforms.
For your benefit, the total source code of this instructional exercise is accessible for download by clicking the Download Code button. Moreover, experience a live exhibit of these Login Form using HTML & CSS by getting to the View Live button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.
More Categories:
Blog • Cards • Fun Project • Game • Hamburger Menu • Login / Signup • Navbar • Testimony / Reviews • To-Do List
I’m really inspired with your writing abilities as smartly as with the layout to your blog. Is that this a paid subject matter or did you modify it your self? Either way keep up the nice high quality writing, it is uncommon to see a nice blog like this one these days..