Frontend – CodingNepal

Create A Glassmorphism Login Form in HTML and CSS

CodingNepal — Mon, 24 Jul 2023 08:30:58 +0000

You may have seen trendy Glassmorphism effects on login forms, cards, and various components on different websites. As a beginner web developer, have you ever thought about creating your own Login form with Glassmorphism effects?

If you’re unfamiliar, glassmorphism is a user interface design trend that creates the illusion of translucent and blurred glass surfaces. This effect gives the elements a semi-transparent look, making the background and foreground blend smoothly.

In this beginner-friendly blog post, I’ll guide you through the steps of creating a Glassmorphism Login Form in HTML and CSS only. Not only will you learn to create forms with a stunning glass-like effect, but you’ll also learn how to add an engaging floating-label animation.

Steps To Create Glassmorphism Login Form HTML & CSS

To create a Login Form with a glassmorphism effect and floating input label animation using HTML and CSS, follow these simple instructions step-by-step:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

To start, add the following HTML codes to your index.html file. These codes include essential HTML elements such as forms, input, links, buttons, and others. For basic form validation, I’ve also included the “required” attribute for the input fields.





  
  
  Glassmorphism Login Form | CodingNepal
  


  
    
      Login
        
        
        Enter your email
      
      
        
        Enter your password
      
      
        
          
          Remember me
        
        Forgot password?
      
      
      
        Don't have an account? Register

Next, add the following CSS codes to your style.css file to style our login form, along with the glassmorphism effect and floating label animation. These lines of code include various CSS properties like blur, background, background image, etc. to achieve the desired Glassmorphism effect.

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 0 10px;
}

body::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000;
  background-position: center;
  background-size: cover;
}

.wrapper {
  width: 400px;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

form {
  display: flex;
  flex-direction: column;
}

h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #fff;
}

.input-field {
  position: relative;
  border-bottom: 2px solid #ccc;
  margin: 15px 0;
}

.input-field label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #fff;
  font-size: 16px;
  pointer-events: none;
  transition: 0.15s ease;
}

.input-field input {
  width: 100%;
  height: 40px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: #fff;
}

.input-field input:focus~label,
.input-field input:valid~label {
  font-size: 0.8rem;
  top: 10px;
  transform: translateY(-120%);
}

.forget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 0 35px 0;
  color: #fff;
}

#remember {
  accent-color: #fff;
}

.forget label {
  display: flex;
  align-items: center;
}

.forget label p {
  margin-left: 8px;
}

.wrapper a {
  color: #efefef;
  text-decoration: none;
}

.wrapper a:hover {
  text-decoration: underline;
}

button {
  background: #fff;
  color: #000;
  font-weight: 600;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 16px;
  border: 2px solid transparent;
  transition: 0.3s ease;
}

button:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.register {
  text-align: center;
  margin-top: 30px;
  color: #fff;
}

Conclusion and Final Words

In conclusion, we explored step-by-step instructions on setting up your project folder, creating the HTML structure, and adding the CSS styles for the Glassmorphism effect and floating label animation. I believe that by following the steps in this post, you’ve successfully created your very own Glassmorphism Login Form.

Remember to experiment and customize your login form to add personal touches and make it even more beautiful. To continue improving your HTML and CSS skills, why not try recreating other login form designs available on this website?

If you encounter any problems while creating your Glassmorphism login form, you can download the source code files for this form project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Frontend vs Backend Development – What’s the difference?

CodingNepal — Wed, 07 Dec 2022 14:25:50 +0000

If you’re new to the programming world, you may have heard these most popular terms: “frontend” and “backend”. In this blog, I’ll explore what these terms actually mean and the differences between them.

Frontend and Backend refer to the two main parts of a website or application. The front end is the visible part of a website, while the back end is the invisible part that powers the front end. They are like two sides of the same coin and are equally important for the proper functioning of the website or application.

I hope now you have some idea of what these frontend and backend terms mean. Don’t worry if you didn’t get it; I have explained each front-end, back-end, and full-stack development in detail below.

What is Frontend Development?

As the name implies, “frontend” means the front part of a website or application that users can see and interact with. This is also referred to as the “client side” of a website. The front end is what makes a website easy to use and visually attractive. UI elements such as navigation menus, images, videos, buttons, forms, etc. are part of the front end.

Frontend is often written in HTML, CSS, JavaScript, and React. A front-end developer is someone who works on front-end development. They are also responsible for the layout, visual design, and feel of the website.

There are many languages and frameworks used in front-end development. But some widely used languages are listed below.

HTML: HTML stands for Hypertext Markup Language. It is used to create and structure a website or web pages. It is the first step in creating a website or web application.
CSS: CSS stands for Cascading Style Sheets. It is used to style and lay out a website. CSS is critical in determining how a website should appear, including its design, color, layout, look, and feel.
JavaScript: JavaScript is a scripting language used to make websites dynamic and interactive. It is also sometimes called by its short name, JS. The codes written in JavaScript are executed by the user’s web browser.

Today, instead of vanilla JavaScript, other frameworks are commonly used in front-end development, like React, Angular, and Vue. But if you want to become a good front-end developer, it is essential to learn JavaScript.

What is Backend Development?

As the name implies, “backend” is the back part of a website or application that handles the logic, database interactions, security, and other behind-the-scenes functionality.

This is also referred to as the “server side” of a website. The front end sends requests to the back end, and the back end processes the request and sends relevant data back to the front end to display to the user.

Programming languages such as PHP, Node.js, Java, Ruby, or Python are often used in backend development. A back-end developer is someone who works on back-end development. They are also responsible for developing the logic, APIs, functionality, and server infrastructure of the website or application.

There are many languages and frameworks used in back-end development. But some widely used languages are listed below.

Node.js: Node.js is an open-source, cross-platform runtime environment that is used to run JavaScript codes outside the web browser. It is built using JavaScript and uses the V8 JavaScript engine to execute the codes.
PHP: PHP stands for Hypertext Preprocessor, which is widely used for backend development. PHP is well-known for its ease of use and a large ecosystem of frameworks such as Laravel, CodeIgniter, Symfony, etc.
SQL: SQL stands for Structured Query Language for managing and querying relational databases like MySQL. It is used to perform CRUD operations on the database. CRUD means to create, read, update, and delete data.

What is Full Stack Development?

Full Stack development is also a widely used term in web development. It refers to both the front-end and back-end aspects of a website. A full-stack developer is someone who specializes in full-stack development. MERN is a popular choice and is now widely used in full-stack website development.

The MERN stack is basically a combination of several technologies: MongoDB, Express.js, React.js, and Node.js. Because of the MERN stack, it is now possible to create a full-stack website or application with JavaScript codes.

Keep in mind that full-stack development can be done using other programming languages too. Full-stack development can be a challenging and rewarding field because it requires a wide range of coding skills and other knowledge.

Conclusion

As you are now aware, both the front end and the back end are essential for web or application development. Without any one of them, the website is incomplete. They work together to provide a seamless experience for the user.

If you are looking to build a career in these fields, I believe you can now choose which field is best for you: Frontend, Backend, or Full Stack. But before choosing a career in this field, carefully consider your interests, skills, and career goals and do more research about the job scope and potential earnings in these fields.

Do you know that apart from the basic features a website has, you need to know something more that will make the site sustainable and attractive in 2023? Read this blog to learn about 10 Web Development Trends to Expect in 2023.

If this blog was helpful to you, don’t forget to share it with others.