Home > 3 D card Effect > login from > 3-d Card Login page | login page in html with css code

3-d Card Login page | login page in html with css code

October 24, 2023 ,

 3-d Card Login page | login page in html with css code 




Video :







1. HTML Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login page | untoldcoding</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="box">
      <div class="elements untoldcoding"></div>
      <div class="elements name">
        <h2>Login Page</h2>
      </div>
      <div class="elements content">
        <form action="">
          <input type="text" placeholder="email" />
          <input type="password" placeholder="password" />
          <button>Login</button>
        </form>
      </div>
      <div class="card"></div>
    </div>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.1/
vanilla-tilt.min.js"
      integrity="sha512-wC/cunGGDjXSl9OHUH0RuqSyW4YNLlsPwhcLxwWW1CR4OeC2E1xpcdZz
2DeQkEmums41laI+eGMw95IJ15SS3g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script>
      VanillaTilt.init(document.querySelector(".box"), {
        max: 25,
        speed: 400,
        glare: true,
      });
    </script>
  </body>
</html>




2. CSS Code :



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppons", sans-serif;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: white;
  background: linear-gradient(#063349 0%, #090979 35%, #00d4ff 100%);
}
.box {
  position: relative;
  border-radius: 20px;
  transform-style: preserve-3d;
}
.box .card {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  width: 300px;
  min-height: 400px;
  backdrop-filter: blur(10px);
  border: 1px solid rgb(255, 255, 255, 0.5);
  border-top: 1px solid rgb(255, 255, 255, 0.75);
  border-left: 1px solid rgb(255, 255, 255, 0.75);
  border-radius: 20px;
  box-shadow: 0 25px 45px rgb(0, 0, 0, 0.5);
  transform-style: preserve-3d;
}
.elements {
  position: absolute;
  top: 50px;
  left: -30px;
  width: 100px;
  height: 100px;
  background: rgb(255, 255, 255, 0.1);
  transform: translateZ(80px);
  backdrop-filter: blur(10px);
  border: 1px solid rgb(255, 255, 255, 0.5);
  border-top: 1px solid rgb(255, 255, 255, 0.75);
  border-left: 1px solid rgb(255, 255, 255, 0.75);
  border-radius: 20px;
  box-shadow: 0 25px 45px rgb(0, 0, 0, 0.5);
}
.elements.name {
  top: 90px;
  left: initial;
  right: 50px;
  width: 100px;
  padding: 10px;

  text-align: center;
  transform: translateZ(100px);
  background: transparent;
  backdrop-filter: blur(10px);
  border: none;
  box-shadow: none;
  opacity: 1;
  color: white;
}
.elements.untoldcoding::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(Untold\ Coding.png);
  background-size: 100px;
  background-repeat: no-repeat;
  border-radius: 12px;
}
.elements.content {
  top: initial;
  left: initial;
  bottom: 30px;
  right: 55px;
  width: 60%;
  min-height: 200px;
  padding: 10px;
  transform: translateZ(180px);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
input {
  background: transparent;
  padding-bottom: 5px;
  margin-bottom: 10px;
  outline: none;
  border: none;
  font-size: 0.9em;
  border: 1px solid rgb(255, 255, 255, 0.5);
  border-top: 1px solid rgb(255, 255, 255, 0.75);
  border-left: 1px solid rgb(255, 255, 255, 0.75);
  border-radius: 10px;
  width: 100%;
}
button {
  margin-top: 10px;
  width: 40%;
  background-color: transparent;
  color: white;
  padding: 10px 0;
  font-size: 12px;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid rgb(255, 255, 255, 0.5);
  border-top: 1px solid rgb(255, 255, 255, 0.75);
  border-left: 1px solid rgb(255, 255, 255, 0.75);
  border-radius: 10px;
  width: 100%;
}
button:hover {
  background-color: #090979;
}
::placeholder {
  color: rgb(181, 177, 177);
  font-size: 10px;
  padding-left: 5px;
}


file name should be style.css




Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.




FAQs (Frequently Asked Questions) on 3D Card Login Page with HTML and CSS

1. What is a 3D Card Login Page?

A 3D Card Login Page is a visually appealing login interface designed using HTML and CSS, featuring a card-like layout that utilizes 3D transformations to create depth and interactivity. It provides users with a modern and engaging experience when accessing a website or application.

2. How does the 3D Card Login Page work?

The 3D Card Login Page utilizes CSS transitions and transforms to create the illusion of a three-dimensional card. When users interact with the login form, such as hovering over or clicking on it, CSS properties are applied to animate the card, providing visual feedback and enhancing the user experience.

3. What are the key components required to create a 3D Card Login Page?

To create a 3D Card Login Page, you'll need:

  • HTML structure: Defines the layout and content of the login form, including input fields and buttons.
  • CSS styling: Applies the visual appearance, positioning, and 3D transformations to the login card.
  • CSS transitions: Specifies the timing and duration of the hover or click effects.
  • JavaScript (optional): Can be used to add additional interactivity or functionality to the login page, although it's not required for the basic 3D card effect.

4. Can the 3D Card Login Page be customized to match a specific website or brand?

Yes, the 3D Card Login Page is highly customizable, allowing designers to tailor the appearance and style of the login form to match the branding and design aesthetics of the website or application. CSS properties such as colors, fonts, backgrounds, and box shadows can be adjusted to achieve the desired look and feel.

5. Is JavaScript necessary to implement the 3D Card Login Page?

No, JavaScript is not required to implement the basic 3D Card Login Page. The effect can be achieved using HTML and CSS alone, leveraging CSS transitions and transforms to create the 3D card effect. However, JavaScript can be optionally used to enhance interactivity or add additional functionality to the login page.

6. How can I ensure cross-browser compatibility when using the 3D Card Login Page?

To ensure cross-browser compatibility, test the 3D Card Login Page across different web browsers and devices, addressing any inconsistencies or rendering issues. Utilize vendor prefixes and fallbacks where necessary and consider using CSS frameworks or libraries that offer built-in support for CSS transitions and transforms.

7. Are there any performance considerations when implementing the 3D Card Login Page?

While the 3D Card Login Page adds visual flair to the login interface, it's essential to consider performance implications, especially on older devices or browsers. Optimize the CSS transitions and transformations to ensure smooth rendering and avoid excessive use of effects that could impact page load times.

8. Can the 3D Card Login Page be integrated with server-side authentication mechanisms?

Yes, the 3D Card Login Page can be integrated with server-side authentication mechanisms to validate user credentials and authenticate login attempts. The HTML form elements can submit user input to a server-side script, such as PHP or Node.js, which handles the authentication process and responds accordingly based on the validity of the credentials.







Post a Comment

No comments

Subscribe to: Post Comments ( Atom )
Powered by Blogger.