Popup Login Form with Animation || Web Designing





Source Code

Step-1:

<body>
  <label for="login-radio" id="login-label"> LOGIN </label>
  <input name="toggle" type="radio" id="login-radio">
  <label for="close-radio" id="close-label">     X </label>
  <input name="toggle" type="radio" id="close-radio">
  <div class="form-base">
  <form id="myform">
    <fieldset class="form-field">
      <legend>LOGIN</legend>
      <div>
        <label for="uname">UsernamE</label>
        <input type="text" id="uname">
      </div>
      <div>
        <label for="pswd">PassworD</label>
        <input type="password" id="pswd">
      </div>
      <div>
        <input type="reset" value="Clear">
        <input type="submit" value="Login">
      </div>
    </fieldset>
  </form>
  </div>
</body>

This code represents an HTML web page structure. It contains various elements that create a login form. There are labels, radio buttons, and input fields. The labels are used to describe the purpose of different form elements, such as "LOGIN" and "X" for buttons. Radio buttons are used to toggle between different parts of the form. The form itself has fields for a username and password, each with its respective label. At the bottom, there are "Clear" and "Login" buttons. This code defines the structure of a basic login form in a web page.

Step-2:

*, *::after, *::before{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

This code is written in CSS, a language used for styling web pages. It's setting some properties for all elements on a web page, including any elements that might be inserted before or after them. The code is essentially saying that for all elements, their padding (spacing inside the element), margin (spacing around the element), and box-sizing (how the element's size is calculated) should be set to specific values. In this case, it's setting the padding and margin to 0, meaning no extra space, and the box-sizing to "border-box," which means that the width and height of an element includes its border and padding, making it easier to control the layout of the webpage. This code is often used to create a consistent starting point for web page styling to avoid unexpected spacing and layout issues.

Step-3:

body{
  display: flex;
  align-items: center;
  justify-content: center;
  background:linear-gradient(45deg, red,blue);
  font-family: 'Poppins', sans-serif;
}

This code is used to style a webpage's body element. It sets the body to be a flexible container, aligning its contents both vertically and horizontally in the center. The background of the body is a linear gradient that goes from red to blue at a 45-degree angle, creating a colorful background effect. It also specifies the font to be 'Poppins' or a sans-serif font family for text within the body. In simpler terms, it arranges the content in the middle of the page, gives the background a diagonal red-to-blue pattern, and uses a particular font for the text.

Step-4:

.form-base{
  background-color: teal;
  height: 300px;
  width: 250px;
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 125px);
  font-size: larger;
  box-shadow: 0px 5px 15px -2px black;
  color: white;
  transform: scale(0);
}

This code defines a CSS style for an element with the class "form-base." It sets the background color to teal, gives it a fixed height and width of 300 pixels and 250 pixels, positions it absolutely on the web page, centers it both vertically and horizontally using the "calc" function, increases the font size to larger, adds a shadow below the element, sets the text color to white, and scales the element down to 0, effectively making it invisible. This style seems to be for creating a hidden form element with a teal background that can later be revealed and displayed on the web page when needed.

Step-5:

[id=login-radio]:checked ~ .form-base{
  animation: popup 0.5s forwards;
}
[id=close-radio]:checked ~ .form-base{
  animation: popdown 0.5s forwards;
}

This code is for a webpage and it's written in a language called CSS. It's used to make things on a webpage move when certain radio buttons are clicked. When a radio button with the ID "login-radio" is checked (selected), it triggers an animation called "popup" that lasts for 0.5 seconds. This animation makes an element with the class "form-base" appear on the webpage. Similarly, when a radio button with the ID "close-radio" is checked, it triggers an animation called "popdown" that also lasts for 0.5 seconds. This animation makes the same "form-base" element disappear on the webpage. So, these lines of code control the visibility of a form or element on a webpage based on which radio button is selected.

Step-6:

@keyframes popup {
  33%{
  transform: scale(0);
  }
  66%{
  transform: scale(1.1);
  }
  100%{
  transform: scale(1);
  }
}

This code defines a set of animation instructions in CSS using the "@keyframes" rule. It's named "popup." The animation has three keyframes at different time points: 33%, 66%, and 100%. At 33%, the element is transformed to be completely invisible and has no size (scale 0). At 66%, it grows slightly larger than its original size (scale 1.1). Finally, at 100%, it returns to its normal size (scale 1). This code can be applied to an HTML element, and it will create an animation where the element first disappears, then enlarges briefly, and finally returns to its original state, giving the appearance of a pop-up effect.

Step-7:

@keyframes popdown {
  0%{
  transform: scale(1);
  }
  33%{
  transform: scale(1);
  }
  66%{
  transform: scale(1.2);
  }
  100%{
  transform: scale(0);
  }
}

This code defines a set of instructions for animating an HTML element, like an image or a button, using CSS. It's called "popdown." The animation consists of four keyframes or stages: 

1. At the beginning (0%), the element is its normal size (scale 1).
2. After one-third of the animation (33%), the element is still at its normal size (scale 1).
3. At two-thirds of the animation (66%), the element suddenly grows to 1.2 times its original size.
4. Finally, at the end (100%), the element shrinks down to nothing, effectively disappearing (scale 0).

This code can be used to create a visual effect where an element starts as normal, grows slightly, and then disappears. You would apply this animation to an HTML element using CSS to make it come to life on a web page.

Step-8:

fieldset{
  border: none;
}
legend{
  text-align: center;
  font-size: x-large;
  text-decoration-line: underline;
}

This code is used to style HTML elements, specifically the `<fieldset>` and `<legend>` elements. The `<fieldset>` element is set to have no border around it, making it look like it doesn't have a visible border. The `<legend>` element, which is typically used to provide a title or caption for the `<fieldset>`, is styled to have its text centered, have a larger font size (x-large), and an underline beneath the text. So, this code makes the fieldset visually distinct by removing its border and makes the legend text within it look centered, larger, and underlined for better presentation on a web page.

Step-9:

.form-field, legend{
  padding: 0.5em 0;
  text-align: center;
}
.form-field *{
  margin: 0.3em 0;
}

This code is for styling a web page using CSS (Cascading Style Sheets). It does two things. First, it targets elements with the class "form-field" and the "legend" element (which is often used for captions in forms). It gives them some spacing and centers their text. Second, it targets all elements inside an element with the class "form-field" (the asterisk "*" means "all elements inside"). It adds a bit of space above and below them. Essentially, it's making sure form fields and legends look neat and centered, and all elements inside form-field have some spacing for better layout.

Step-10:

input{
  outline: none;
  border: none;
  padding: 0.5em;
  background-color: white;
  color: teal;
  font-size: 0.8em;
  border-radius: 20px;
}

This code appears to be defining the styling or appearance of an input element in a web page using Cascading Style Sheets (CSS). It specifies various properties to customize the input element's look. It removes the default outline and border, sets the padding to create space inside the input field, makes the background white, changes the text color to teal, sets the font size to 0.8em, and rounds the corners of the input field with a border-radius of 20 pixels. In simpler terms, it's making the input field look like a small, rounded-corner box with a white background and teal text.

Step-11:

[type=reset], [type=submit]{
  margin: 0.5em 1em;
  font-family: 'Poppins', sans-serif;
  padding:0.5em 1em;
}

This code is written in a stylesheet language like CSS, and it's used to style buttons on a webpage. It targets two types of buttons: reset and submit buttons. The code sets some visual properties for these buttons. It adds a margin of 0.5em (spacing around the button) on the top and bottom and 1em on the left and right. It also specifies the font family to be 'Poppins' or a sans-serif font. Additionally, it adds padding of 0.5em on the top and bottom and 1em on the left and right of these buttons, which gives them some extra space inside. This code helps in customizing the appearance of these buttons to make them look a certain way on the webpage.

Step-12:

#close-label{
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% + 80px);
  margin: 0.5em;
  padding: 0.5em;
  color: white;
  z-index: 2;
  display: none;
  animation: fade 0.5s 0.3s forwards;
  opacity: 0;
}

This code is used to style an HTML element with the ID "close-label." The element is set to appear in an absolute position on the web page, about halfway down from the top and a bit to the right from the center. It has some space around it with a small margin and padding, and the text inside it will be white. The element is initially hidden ("display: none"), but it will become visible with a fade-in animation after 0.3 seconds ("animation: fade 0.5s 0.3s forwards"). The "opacity" property is set to 0 initially, meaning it's completely transparent, and it gradually becomes fully opaque as it fades in. This code is typically used for creating a pop-up or tooltip-like element that appears on a web page.

Step-13:

[id=login-radio]:checked + #close-label{
  display: block;
}
#login-radio, #close-radio{
  display: none;
}

This code is written in a language called CSS, which is used for styling and formatting web pages. It's controlling the visibility of elements on a web page. The code has two main parts. The first part says that if an element with the ID "login-radio" is checked (like a radio button being selected), then an element with the ID "close-label" should be displayed (shown) on the web page. The second part of the code hides (doesn't show) two elements with the IDs "login-radio" and "close-radio." So, when the "login-radio" is checked, the "close-label" is shown, and the "login-radio" and "close-radio" are hidden. This is often used in web design to create interactive elements or hide/show options based on user choices.


Step-14:

#login-label{
  padding: 0.5em 1em;
  background-color: aqua;
  color: black;
  border-radius: 20px;
}

This code is for styling a label element with the ID "login-label" in a web page using CSS (Cascading Style Sheets). The label will have some visual characteristics: it will have padding of 0.5em (which is a measurement unit based on the font size) on the top and bottom, and 1em on the left and right, giving it some space around its content. The background color will be aqua, and the text color inside the label will be black. It will also have rounded corners with a border-radius of 20 pixels, making it look like a rounded shape. In simple terms, it's a piece of code that makes a label on a webpage look like a rounded, aqua-colored box with black text inside it.


Step-15:

@keyframes fade {
  to{
  opacity: 1;
  }
}

This code is defining a set of animation instructions using a feature called "@keyframes." The animation is named "fade," and it specifies that at the end of the animation, the element being animated should have full opacity, meaning it becomes completely visible. In simple terms, this code is telling an element to gradually become fully visible, like fading in from being invisible, when the animation is applied to it.


---END---

Comments

Post a Comment