Borang UI homomorfik-tutorial css-php.cn

Borang UI homomorfik

NeumorphismUI ialah trend reka bentuk popular terkini yang menggabungkan skeuomorphism dengan gaya moden.

NeumorphismUI ialah gaya reka bentuk yang patut dipertimbangkan apabila digunakan pada borang. Ia boleh menjadikan antara muka pengguna berasa lebih ketara dan interaktif, akhirnya meningkatkan kebolehgunaan keseluruhan borang.

Dalam artikel ini, kami akan meneroka pelbagai jenis bentuk NeumorphismUI dan memberikan contoh serta amalan terbaik untuk setiap satu.

Contoh

Dalam contoh ini, kami mencipta borang log masuk untuk meningkatkan pengalaman yang dipertingkatkan. Mula-mula, kami bermula dengan mereka bentuk bentuk dalam gaya bukan skeuomorphic, memberikan rupa moden dan elegan. Kami menambah kesan bayangan halus untuk mencipta ilusi kedalaman dan dimensi, menjadikannya menonjol dari latar belakang.

Pengguna boleh memasukkan nama pengguna dan kata laluan mereka dalam medan input, dan apabila menuding tetikus di atas setiap medan input, medan tersebut akan kelihatan dinaikkan dengan kesan bayang-bayang.

Dalam output, pengguna melihat bahawa borang log masuk menarik secara visual, berfungsi dan mesra pengguna.

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>

Salin selepas log masuk

Contoh

Dalam contoh ini, kami mencipta bentuk NeumorphismUI kecerunan. Borang ini termasuk medan input teks untuk e-mel pengguna, mesej dan butang hantar. Gaya CSS termasuk latar belakang kecerunan, bentuk bulat lembut dan bayang-bayang halus untuk mencipta kesan NeumorphismUI.

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>

Salin selepas log masuk

Contoh

Dalam contoh ini, kami mencipta borang UI Neumorphism mod gelap yang membolehkan pengguna melanggan surat berita. Selepas itu, kami menambah warna latar belakang kecerunan linear pada badan dan memberikan bentuk bayangan kotak dengan nilai negatif dan positif untuk mencipta kesan homomorfik.

Dalam output, pengguna boleh memerhati bentuk mod gelap dengan kesan homomorfik, di mana unsur bentuk kelihatan dinaikkan sedikit dari latar belakang.

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>

Salin selepas log masuk

Kesimpulan

Pengguna telah mempelajari cara menggunakan neumorphismUI untuk mencipta bentuk yang menarik secara visual seperti bentuk kecerunan, bentuk mod gelap dan bentuk ringkas. Mereka juga belajar cara menggunakan CSS untuk mencipta reka bentuk homomorfik yang memberikan bentuk rupa moden dan tulen.

Atas ialah kandungan terperinci Borang UI homomorfik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!