Homomorphe UI-Form-CSS-Tutorial-php.cn

Homomorphe UI-Form

NeumorphismUI ist ein aktueller beliebter Designtrend, der Skeuomorphismus mit modernem Stil verbindet.

NeumorphismUI ist ein Designstil, der bei der Anwendung auf Formulare in Betracht gezogen werden sollte. Dadurch kann die Benutzeroberfläche greifbarer und interaktiver wirken, was letztendlich die allgemeine Benutzerfreundlichkeit des Formulars verbessert.

In diesem Artikel untersuchen wir die verschiedenen Arten von NeumorphismUI-Formularen und stellen Beispiele und Best Practices für jedes bereit.

Beispiel

In diesem Beispiel haben wir ein Anmeldeformular erstellt, um das verbesserte Erlebnis zu verbessern. Zunächst haben wir damit begonnen, die Form in einem nicht skeuomorphen Stil zu entwerfen, um ihr ein modernes und elegantes Aussehen zu verleihen. Wir haben subtile Schatteneffekte hinzugefügt, um die Illusion von Tiefe und Dimension zu erzeugen und es vom Hintergrund abzuheben.

Benutzer können ihren Benutzernamen und ihr Passwort in die Eingabefelder eingeben. Wenn Sie mit der Maus über jedes Eingabefeld fahren, wird das Feld mit einem Schatteneffekt erhöht angezeigt.

In der Ausgabe sehen Benutzer, dass das Anmeldeformular optisch ansprechend, funktional und benutzerfreundlich ist.

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>

Nach dem Login kopieren

Beispiel

In diesem Beispiel erstellen wir ein NeumorphismUI-Formular mit Farbverlauf. Das Formular enthält ein Texteingabefeld für die E-Mail-Adresse und Nachricht des Benutzers sowie eine Schaltfläche zum Senden. Zu den CSS-Stilen gehören Verlaufshintergründe, weiche, abgerundete Formen und subtile Schatten, um einen NeumorphismUI-Effekt zu erzeugen.

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>

Nach dem Login kopieren

Beispiel

In diesem Beispiel erstellen wir ein Neumorphism-UI-Formular im Dunkelmodus, das es Benutzern ermöglicht, den Newsletter zu abonnieren. Danach fügten wir dem Körper eine Hintergrundfarbe mit linearem Farbverlauf hinzu und gaben der Form einen Kastenschatten mit negativen und positiven Werten, um einen homomorphen Effekt zu erzeugen.

In der Ausgabe können Benutzer ein Formular im dunklen Modus mit einem homomorphen Effekt beobachten, bei dem die Formularelemente leicht vom Hintergrund abgehoben zu sein scheinen.

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>

Nach dem Login kopieren

Fazit

Benutzer haben gelernt, wie man mit neumorphismUI optisch ansprechende Formen wie Verlaufsformen, Dunkelmodusformen und einfache Formen erstellt. Sie lernten auch, wie man mit CSS homomorphe Designs erstellt, die Formen ein modernes und authentisches Aussehen verleihen.

Das obige ist der detaillierte Inhalt vonHomomorphe UI-Form. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!