Homomorphic UI form-CSS Tutorial-php.cn

Homomorphic UI form

NeumorphismUI is a recent popular design trend that combines skeuomorphism with modern style.

NeumorphismUI is a design style worth considering when applied to forms. It can make the user interface feel more tangible and interactive, ultimately improving the overall usability of the form.

In this article, we’ll explore the different types of NeumorphismUI forms and provide examples and best practices for each.

Example

In this example, we create a login form to enhance the enhanced experience. First, we started by designing the shape in a non-skeuomorphic style, giving it a modern and elegant look. We added subtle shadow effects to create the illusion of depth and dimension, making it stand out from the background.

Users can enter their username and password in the input fields, and when hovering the mouse over each input field, the field will appear raised with a shadow effect.

In the output, users see that the login form is visually appealing, functional, and user-friendly.

index.html

<html>
<head> 
   <title>Neumorphic Login Form</title> 
   <style>
      @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"); 
      * {  
         box-sizing: border-box; 
         margin: 0; 
         padding: 0; 
      } 
      body { 
         font-family: 'Lato', sans-serif; 
         display: flex; 
         align-items: center; 
         justify-content: center; 
         flex-direction: column;
         width: 100%; 
         height: 100vh;
         background-color: #e6e6e6; 
      }  
      .container { 
         background-color: #e6e6e6; 
         border-radius: 20px; 
         box-shadow: -5px -5px 10px #ffffff, 5px 5px 10px #b7b7b7; 
         padding: 30px; 
      } 
      h1 { 
         text-align: center; 
         margin-bottom: 30px; 
         font-size 2rem; 
      } 
      h2{ 
         margin-bottom: 2rem; 
         color: #333; 
      } 
      form { 
         display: flex; 
         flex-direction: column;  
      }  
      .input-container { 
         position: relative; 
         margin-bottom: 20px; 
      }  
      input { 
         width:100%;
         background-color: #e6e6e6; 
         border: none; 
         border-radius: 10px; 
         box-shadow: inset -5px -5px 10px #ffffff, inset 5px 5px 10px #b7b7b7; 
         padding: 15px 20px; 
         font-size 1rem; 
         transition: box-shadow 0.2s ease; 
      } 
      input:focus { 
         outline: none; 
         box-shadow: inset -5px -5px 10px #b7b7b7, inset 5px 5px 10px #ffffff; 
      } 
      i {
         position: absolute; 
         top: 50%; 
         transform: translateY(-50%); 
         right: 20px; 
         color: #b7b7b7; 
         transition: transform 0.2s ease, color 0.2s ease; 
      }  
      input:focus + i { 
         transform: translateY(-50%) translateX(10px); 
         color: #777777;  
      } 
      button { 
         background-color: #ff7f50; 
         border: none;  
         border-radius: 10px; 
         color: #ffffff;  
         font-size: 1.2rem; 
         padding: 15px;  
         margin-top: 20px; 
         cursor: pointer;  
         transition: box-shadow 0.2s ease;  
      }  
      button:hover {  
         box-shadow: -5px -5px 10px #ffffff, 5px 5px 10px #b7b7b7; 
      } 
   </style>
</head> 
<body> 
   <h2>Neumorphism UI - Form Animation </h2> 
   <div class="container"> 
      <h1>Neumorphic Login Form</h1> 
      <form> 
         <div class = "input-container"> 
            <input type = "text" placeholder = "Username" required> 
            <i class="fas fa-user"></i> 
         </div> 
         <div class = "input-container"> 
            <input type = "password" placeholder = "Password" required>  
            <i class="fas fa-lock"></i> 
         </div> 
         <button type = "submit"> Sign in </button> 
      </form> 
   </div> 
</body> 
</html>

Copy after login

Example

In this example, we create a gradient NeumorphismUI form. The form includes a text input field for the user's email, message, and a submit button. CSS styles include gradient backgrounds, soft rounded shapes, and subtle shadows to create a NeumorphismUI effect.

index.html

<html>
<head>
   <title> Gradient Form</title>
   <style>
      body {
         font-family: 'Lato', sans-serif;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         width: 100%;
         height: 100vh;
         background: linear-gradient(to bottom, #a6c0fe, #3f6bfe);
      }
      .neumorphism-form {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 2rem;
         border-radius: 1rem;
      }
      .gradient {
         background: linear-gradient(to bottom, #a6c0fe, #3f6bfe);
         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.1);
      }
      .neumorphism-form h2 {
         color: #fff;
         font-size: 2rem;
         margin-bottom: 1rem;
      }
      .neumorphism-form label {
         font-size: 1.2rem;
         margin-bottom: 0.5rem;
      }
      .message,
      .neumorphism-form input {
         padding: 0.5rem;
         border: none;
         border-radius: 0.5rem;
         background-color: #f7f7f7;
         box-shadow: inset 4px 4px 8px rgba(255, 255, 255, 0.5),
         inset -4px -4px 8px rgba(0, 0, 0, 0.1);
         margin-bottom: 1rem;
         width: 100%;
      }
      .neumorphism-form button {
         background-color: #3f6bfe;
         color: #fff;
         border: none;
         border-radius: 0.5rem;
         padding: 0.5rem 1rem;
         font-size: 1.2rem;
         box-shadow: 4px 4px 8px rgba(163, 177, 198, 0.5),
         -4px -4px 8px rgba(255, 255, 255, 0.2);
         cursor: pointer;
      }
      .neumorphism-form button:hover {
         transform: translateY(-2px);
         box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.5),
         -2px -2px 4px rgba(255, 255, 255, 0.2);
      }
   </style>
</head>
<body>
   <form class = "neumorphism-form gradient">
      <h2> Contact Us </h2>
      <input type = "email" id = "email" name = "email" placeholder = "Email">
      <textarea class = "message" id =" " cols = "30" rows = "10" placeholder = "Write Your Message..."> </textarea>
      <button type = "submit"> Submit </button>
   </form>
</body>
</html>

Copy after login

Example

In this example, we create a dark mode Neumorphism UI form that allows users to subscribe to a newsletter. After that, we added a linear gradient background color to the body and gave the form a box-shadow with negative and positive values to create a homomorphic effect.

In the output, users can observe a dark mode form with a homomorphic effect, where the form elements appear to be slightly raised from the background.

Index.html -

<html>
<head>
   <title> Dark Mode Form</title>
   <style>
      body {
         font-family: "Lato", sans-serif;
            display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         width: 100%;
         height: 100vh;
         background: linear-gradient(150deg, #333, #111);
      }
      .neumorphism-form {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 2rem;
         border-radius: 1rem;
      }
      .dark-mode {
         box-shadow: -4px -4px 4px rgba(255, 255, 255, 0.08),
         4px 4px 4px rgba(0, 0, 0, 0.56), 0 0 0 rgba(255, 255, 255, 0.08) inset,
         0 0 0 rgba(0, 0, 0, 0.56) inset;
         border: 1px solid rgba(0, 0, 0, 0.08);
      }
      .neumorphism-form h2 {
         font-size: 1.5rem;
         margin-bottom: 1.5rem;
         color: #64dd178f;
      }
      .neumorphism-form input[type="email"] {
         padding: 0.5rem;
         background-color: transparent;
         box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.08),
         2px 2px 2px rgba(0, 0, 0, 0.56),
         -2px -2px 2px rgba(255, 255, 255, 0.08) inset,
         2px 2px 2px rgba(0, 0, 0, 0.56) inset;
         border: 1px solid rgba(0, 0, 0, 0.08);
         margin-bottom: 1rem;
         width: 100%;
            color: #ffff;
      }
      .neumorphism-form button {
            background-color: transparent;
            color: #ff40408f;
            border-radius: 0.5rem;
         padding: 0.5rem 1rem;
         font-size: 1.2rem;
         box-shadow: -2px -2px 4px rgba(100, 221, 23, 0.12),
         4px 4px 4px rgba(0, 0, 0, 0.56), 0 0 0 rgba(100, 221, 23, 0.12) inset,
         0 0 0 rgba(0, 0, 0, 0.56) inset;
         border: 1px solid rgba(0, 0, 0, 0.08);
         cursor: pointer;
      }
      .neumorphism-form button:hover {
         transform: translateY(-2px);
         border: solid 1px #64dd178f;
      }
   </style>
</head> 
<body>
   <form class = "neumorphism-form dark-mode"> 
      <h2> Subscribe to Newsletter </h2>
      <input type = "email" id = "email" name = "email" placeholder = "Enter your email">
      <button type = "submit"> Subscribe </button>
   </form>
</body>
</html>

Copy after login

in conclusion

Users have learned how to use neumorphismUI to create visually appealing forms such as gradient forms, dark mode forms, and simple forms. They also learned how to use CSS to create homomorphic designs that give forms a modern and authentic look.

The above is the detailed content of Homomorphic UI form. For more information, please follow other related articles on the PHP Chinese website!